代码之家 › 专栏 › 技术社区 › Nathan Arthur user2811108

在CSS中同时淡入两个图像

transparency image css

Nathan Arthur user2811108 · 技术社区 · 7 年前

假设我有两个图像:

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

我需要使用CSS来实现这一点,因为图像是用户提供的。

我试过使用CSS渐变、多个背景图像和混合模式,但没能达到我想要的效果。而且,我无法通过谷歌搜索找到我需要的东西。

3 回复 | 直到 7 年前

DreamTeK 7 年前

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

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

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

Gabbax0r 7 年前

我给你举了一个有背景的例子。位置相对+两个梯度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/

All about JS 7 年前

我用过 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">