Question

我看到了这个演示：http://css3.bradshawenterprises.com/cfimg/关于如何使用CSS交叉淡化两个图像，并寻找一个响应式解决方案，因为该解决方案要求我定义容器的高度和宽度。

这是那些不想点击的人的演示代码：

HTML：

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>`

CSS：

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  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;
}

#cf img.top:hover {
  opacity:0;
}

JSFiddle：http://jsfiddle.net/nqaq77ec/

谢谢。

Answer 1

您只需在容器上设置百分比宽度，并在图像上设置width:100%; height: auto;：

<强> DEMO

Answer 2

试试这个css：

#cf {
  position:relative;
  width:100%;
    height:100%;
  max-height:400px;
  max-width:400px;
  margin:0 auto;
}

#cf img {
    width:100%;
  position:absolute;
  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;
}

#cf img.top:hover {
  opacity:0;
}

Answer 3

试试这个 - http://fiddle.jshell.net/gruqmh6j/

#cf {
position:relative;
height:400px;
width:400px;
max-width:100%;
margin:0 auto;
}

#cf img {
position:absolute;
max-width:100%;
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;
}

响应式CSS图像交叉淡入淡出

3 个答案: