我正在研究 website (早期阶段)并且我在白色背景区域中应用背景淡入淡出时遇到了严重困难(我希望有一些图像在背景上自动旋转,完全填充它)。
根据 HTML 代码,我应该可以在 CSS 中使用 .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;
}
我该怎么做才能显示在白色背景区域(完全覆盖它?)
非常感谢!
最佳答案
您可以尝试寻找一些 existing guides .或者寻找一些现有的带有交叉淡入淡出过渡的图像 slider 。如果您愿意编写自己的淡入淡出,则可以使用 background-size: cover
来填充整个区域 ( example )
关于html - 背景淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21445066/