Question

说我有这两张图片：

我如何将它们like this组合在一起，只使用CSS将其逐渐淡入另一个？

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

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

Answer 1

这是使用mask-image属性的解决方案。

缩放浏览器窗口以查看图像交叉淡入淡出。

#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>

Answer 2

我以背景为例。位置相对+两个渐变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) */
}

小提琴： https://jsfiddle.net/d8v23w60/1/

Answer 3

我使用了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">

在CSS中将两个图像淡化

3 个答案: