我正在开发一个网站(早期阶段),并且在白色背景区域应用背景淡入淡出时遇到严重困难(我希望在背景上自动旋转一些图像,完全填充它)。
根据 HTML 代码,我应该可以很好地使用 CSS 中的 class .main-container 但是,这不会改变任何事情......
我衷心感谢您的帮助,我是自学 HTML+CSS 的,我只需要指导以采取正确的步骤。
你会推荐什么?
提前谢谢了!
(更新)
我决定使用 Tympanus.net 解决方案。
对http://www.marcocarlo.com/mimosa/index.html的实施很糟糕
这是CSS代码:
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
background-size:cover;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
animation: titleAnimation 18s linear infinite 0s;
}
我该怎么做才能显示在白色背景区域(完全覆盖它?)
提前谢谢了!