css背景图技巧 |css遮盖层

一、背景图缩放

background-size:cover;

该代码可以让背景图自适应浏览器视窗大小，如果图像的宽高比不同于窗口的宽高比，那么图像的部分区域将被裁剪。

二、背景透明度

opacity:0.5;

该代码可以让背景透明度设置为50%。

三、背景图动画效果

background-image: url('image1.jpg');
animation-name: changeImage;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
@keyframes changeImage {
0% {
background-image: url('image1.jpg');
}
50% {
background-image: url('image2.jpg');
}
100% {
background-image: url('image1.jpg');
}
}

该代码可以让背景图自动切换，实现动画效果。

四、背景图呈现方式

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

该代码可以让背景图居中，不重复呈现，且固定在浏览器窗口底部。

以上是关于CSS背景图技巧的一些方法，希望对你有所帮助。