揭秘背景图片在CSS中的五大应用技巧，让你的网页视觉更上一层楼！

一、背景图片设置

1. 背景颜色与背景图片结合

body {
    background-color: #f0f0f0;
    background-image: url('bg.jpg');
}

2. 背景图片位置

div {
    background-image: url('bg.jpg');
    background-position: center center;
}

3. 背景图片重复

• no-repeat：不重复
• repeat：水平和垂直方向重复
• repeat-x：水平方向重复
• repeat-y：垂直方向重复

div {
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
}

二、背景图片自适应全屏

#webbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
}

三、背景图片滚动效果

• scroll：背景图片随页面滚动
• fixed：背景图片固定不动

div {
    background-image: url('bg.jpg');
    background-attachment: fixed;
}

四、背景图片滤镜效果

div {
    background-image: url('bg.jpg');
    filter: blur(5px);
}

五、背景图片动画效果

@keyframes bg-move {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}

#webbg {
    animation: bg-move 10s infinite linear;
}

总结