响应式 CSS 图像淡入淡出

Posted 2023-03-06

【中文标题】响应式 CSS 图像淡入淡出

【英文标题】：Responsive CSS image cross-fade

【发布时间】：2014-11-24 22:29:57

【问题描述】：

我看到了这个演示：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/

谢谢。

【问题讨论】：

您可以使用百分比和容器 div。

【参考方案1】：

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

DEMO

【讨论】：

谢谢！有效 - 但我将新手的答案标记为选择的答案，这样他就可以收集一些功劳:)

【参考方案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;

【参考方案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;