渐变混合多个图像 [英] Gradient Blend Multiple Images

问题描述

如何使用CSS使多个图像仅在特定区域渐变融合，如下图所示？

How to make multiple images gradient blend to each other at only certain area as in the attached image below using CSS?

我尝试过的操作：

.container {
  position: relative;
  display: flex;
  height: 200px;
}

.container:before {
  content: '';
  position: absolute;
  width: 80px;
  top: 0;
  bottom: 0;
  right: 50%;
  margin-right: -40px;
  background: url(https://www.w3schools.com/w3css/img_fjords.jpg);
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.container > div {
  flex: 1;
  background-size: 100% 100%;
}

<div class="container">
  <div style="backgroud-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div>
  <div style="background-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div>
</div>

但是，相对于背景图像，没有褪色/过渡，如下图所示：

However, there's no fading/transition respecting to the background images as shown in below image:

更新

我的问题没有得到任何肯定的答案，但是这段代码似乎是我到目前为止可以得到的最接近的答案。

I haven't receive any solid answer for my question but this code seems like the closest answer I can get till date.

PEN作者Peter Ramsing

<div class="hero-image">
  <img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" />
</div>
<div class="hero-before">
  <img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" />
</div>

<style>
img {
  /*  To contain the image to the confines of the div  */
  max-width: 100%;
}

.hero-image {
  max-width: 100%; 
  width: 800px;
  margin: auto;
 }
.hero-before {
  max-width: 100%; 
  width: 800px;
  margin: auto;
}

.hero-image::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  margin-top: -50px;
  height: 40px;
  width: 100%;
  content: '';
}
.hero-before::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  margin-top: -345px;
  height: 50px;
  width: 100%;
  content: '';
}
</style>

推荐答案

您可以使用放在两张图片并对其应用线性渐变。通过使用相同的颜色，您将创建此效果。您可能会注意到，该解决方案将通过使用背景色和背景图片起作用，您只需要尊重背景中使用的颜色并将其应用于伪元素即可。

You may use some pseudo element that you put between the two images and apply linear gradient on it. By using the same colors you will create this effet. You may notice that the solution will work by using background color and also backround image, you simply need to respect the color used in the background and apply them to the pseudo element.

这里是一个示例，您可以根据需要调整伪元素的宽度：

Here is an example, you may adjust the width of the pseudo element depending on your needs :

.container {
  position: relative;
  display: flex;
  min-height: 100px;
  margin-bottom:20px;
}

.container:before {
  content: '';
  position: absolute;
  width: 80px;
  top: 0;
  bottom: 0;
  right: 50%;
  margin-right: -40px;
  background: linear-gradient(to right, #c3986b, #0a4b67);
}

.container>div {
  flex: 1;
  background-size:100% 100%;
}

<div class="container">
  <div style="background:#c3986b;"></div>
  <div style="background:#0a4b67;"></div>
</div>

<div class="container">
  <div style="background-image:url(https://dummyimage.com/150x100/c3986b/14151a)"></div>
  <div style="background-image:url(https://dummyimage.com/150x100/0a4b67/14151a)"></div>
</div>

这是另一个带有遮罩的想法处理任何类型的图像

Here is another idea with mask that will work with any kind of images

>

.container {
  display: flex;
  min-height: 300px;
  margin-bottom:20px;
}


.container>div {
  flex: 1;
  background-size:0 0;
  position:relative;
  z-index:-1;
}
.container>div::before {
  content:"";
  position:absolute;
  background-image:inherit;
  background-size:cover;
  background-position:center;
  z-index:-1;
  top:0;
  bottom:0;
}
.container>div:first-child::before {
  left:0;
  right:-50px;
  -webkit-mask:linear-gradient(to left,transparent ,#fff 50px);
          mask:linear-gradient(to left,transparent ,#fff 50px);
}
.container>div:last-child::before {
  right:0;
  left:-50px;
  -webkit-mask:linear-gradient(to right,transparent ,#fff 50px);
          mask:linear-gradient(to right,transparent ,#fff 50px);
}

<div class="container">
  <div style="background-image:url(https://picsum.photos/id/1074/800/800.jpg)"></div>
  <div style="background-image:url(https://picsum.photos/id/1060/800/800.jpg)"></div>
</div>

<div class="container">
  <div style="background-image:url(https://picsum.photos/id/1070/800/800.jpg)"></div>
  <div style="background-image:url(https://picsum.photos/id/1062/800/800.jpg)"></div>
</div>

这篇关于渐变混合多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！