我的网页设计作业需要帮助。我们必须仅使用 CSS 设计一个 Wordpress 页面。 我想在标题中使用 2 个图像交叉淡入淡出。
在我的代码的重要部分下面。当然,由于有两个背景图像,它不能像这样工作。动画准备好了,但是当img淡出的时候,只有一个白洞。
那么如何在 CSS 中放置 2 个图像?... 谢谢你的帮助! (抱歉英语不好 :D)
#pageheader {
background-image: url('img/test.jpg');
background-image: url('img/bg.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@keyframes pageheaderFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#pageheader {
animation-name: pageheaderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
最佳答案
当你的动画运行时你会看到“白洞”,因为你的两个背景图像都在你的#pageheader div 中,你的动画正在使它透明。
由于您不想编辑您的 HTML,我们可以使用 :after 伪元素作为一个单独的元素来保存您的第二张图片。请注意,这仅适用于这两个图像。
这是一个有效的 jsfiddle .
CSS:
#pageheader {
background-image: url('img/test.jpg');
height: 500px;
width: 600px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#pageheader:after{
content: '';
display: block;
width: 100%;
height: 500px;
background-image: url('img/bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
animation-name: pageheaderFadeInOut;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-duration: 10s;
}
@keyframes pageheaderFadeInOut {
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
请注意,您需要添加浏览器前缀(就像我在 jsfiddle 中所做的那样)。
关于css - 没有 HTML 的图像淡入淡出 - 仅 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28200489/