CSS背景圖特效可以為網頁添加更多的視覺效果。下面我們介紹幾種常用的CSS背景圖特效。

/*背景圖透明度*/
.opacity{
background-image: url(bg.jpg);
opacity: 0.5;
}
/*背景圖滾動*/
.scroll{
background-image: url(bg.jpg);
background-repeat: repeat-x;
animation: scroll 10s infinite linear;
}
@keyframes scroll{
0%{
background-position: 0;
}
100%{
background-position: -2000px 0;
}
}
/*背景圖固定*/
.fixed{
background-image: url(bg.jpg);
background-size: cover;
background-attachment: fixed;
}
/*背景圖漸變*/
.gradient{
background-image: linear-gradient(to bottom right, #ff8a00, #ffcc00);
}

以上代碼分別實現了背景圖透明度、背景圖滾動、背景圖固定和背景圖漸變四種特效。可以根據需要自由組合使用。