Question

我尝试将淡入淡出图像添加到页面中（代码取自此处：cross fade images 它有效，但由于图像的绝对位置 - img.top和img.bottom（css）它出现在文本后面或上面（进入另一个div：about）。当我移除绝对位置时，它漂浮在另一个文本div附近，但图片不会交叉褪色，因为它们是一个接近另一个，而不是一个在另一个绝对。所以使用绝对可能是必须的，但我需要它相对于其他div浮动而不是进入它们。

有人知道如何解决它？

<div id="cf">
    <img class="bottom" src="style/images/1.jpg" id="pic1">
    <img class="top" src="style/images/2.jpg" id="pic2">
</div>
<div id="about" class="body_text">
     a lot of text
</div>

and the css:
#cf {
    position:relative;
    float:left;
    margin:0 auto;
    background-color:black;
}
img.top, img.bottom{
    position:absolute;
    width:100px;
    height:100px;
    -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 cf_animation {
    0% {
        opacity:1;
    }
    40% {
        opacity:1;
    }
    60% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
#cf img.top {
animation-name: cf_animation;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
animation-direction: alternate;
}
#about{
position:relative;
    float:top;
}

Answer 1

我今天遇到了同样的问题并得到了一个“解决方案”。试试这个，添加另一个div作为一个更大的盒子，并在那里添加相同的图片。然后把这个div作为一个亲戚，把'cf'和cf img作为绝对。像这样的东西..我不使用漂浮，所以我不能保证它会像我一样工作......但希望它能。

<div id="container">
<img class="bottom" src="style/images/1.jpg" id="pic1">
<div id="cf">
<img class="bottom" src="style/images/1.jpg" id="pic1">
<img class="top" src="style/images/2.jpg" id="pic2">
</div>
</div>

<div id="about" class="body_text">
a lot of text
</div>

和CSS

#container {
position:relative;}

#cf {
position:absolute;
float:left;
margin:0 auto;
background-color:black;}

img.top, img.bottom{
position:absolute;
width:100px;
height:100px;
-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;}

相对定位div内的绝对定位交叉淡化图像不起作用

1 个答案: