CSS把图片变成背景能轮播并且能插入文字
时间: 2023-08-05 22:03:44 浏览: 87
纯CSS实现带缩略图的简单图片自动轮播
是的,可以使用CSS将图片作为背景,并且可以轮播多个背景图片。同时,您也可以在背景图片上插入文字。以下是一个简单的实例:
HTML代码:
```
<div class="background">
<div class="text">
<h1>我是标题</h1>
<p>我是一些描述性文字。</p>
</div>
</div>
```
CSS代码:
```
.background {
background-image: url('image1.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 400px;
position: relative;
}
.background:before {
content: "";
background-image: url('image2.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 400px;
width: 100%;
position: absolute;
top: 0;
left: 0;
animation: slideshow 8s linear infinite;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
@keyframes slideshow {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
```
在这个例子中,我们将第一张图片作为背景,然后使用:before伪元素添加第二张图片并使用CSS动画将其渐隐渐显。我们还将文本放置在背景图片上,并使用CSS位置属性进行定位。
阅读全文