在 CSS 中将两个图像淡入淡出

Question

假设我有这两张图片：

如何组合它们 like this，其中一个逐渐淡入另一个，仅使用 CSS？

我需要使用 CSS 来执行此操作，因为图像是用户提供的。

我已经尝试使用 CSS 渐变、多个背景图像和混合模式，但无法实现我想要的效果。另外，无法通过谷歌搜索找到我需要的东西。

Answer 1

我给你做了一个有背景的例子。相对位置 + 两个梯度 bgs。也许这适用于您的照片

<body>
 <div style="position:relative">
  <div id="grad1">Image1asBG</div>
  <div id="grad2">Image2asBG</div>
 </div>
</body>

css:

    #grad1 {
    position: absolute;
    height: 400px;
    width:100%;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

#grad2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width:100%;
    background: -webkit-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,2550,0,1), rgba(255,255,0,0)); /* Standard syntax (must be last) */
}

fiddle: https://jsfiddle.net/d8v23w60/1/

Answer 2

我用了opacity。这是一份工作副本。希望对你有所帮助。

这样试试：

#img1 {
position:relative;
}
#img2 {
position:absolute;
left:5px;
opacity:0.5;
}

<img src="https://i.stack.imgur.com/UvGLY.jpg" width="400" id="img1">
<img src="https://i.stack.imgur.com/kqa1P.jpg" width="200" id="img2">

Answer 3

这是一个使用掩码图像的解决方案属性。

缩放浏览器window 以查看图像淡入淡出。

#Wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

#Left,
#Right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

#Left {
  left: 0;
  background: url('https://i.stack.imgur.com/kqa1P.jpg') top left no-repeat;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  background-size: contain;
}

#Right {
  right: 0;
  background: url('https://i.stack.imgur.com/UvGLY.jpg') top right no-repeat;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  background-size: contain;
}

<div id="Wrap">
  <div id="Left"></div>
  <div id="Right"></div>
</div>

在 CSS 中将两个图像淡入淡出

Fade two images together in CSS

css

transparency

image