漸變混合多個圖像

Question

如何使用 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>

但是，對於背景圖像沒有褪色/過渡，如下圖所示：

更新

我的問題沒有得到任何可靠的答案，但這段代碼似乎是迄今為止我能得到的最接近的答案。

PEN BY 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>

Answer 1

您可以使用一些放置在兩個圖像之間的偽元素並在其上應用線性漸變。 通過使用相同的顏色，您將創建此效果。 您可能會注意到該解決方案將通過使用背景顏色和背景圖像來工作，您只需要尊重背景中使用的顏色並將它們應用於偽元素。

這是一個示例，您可以根據需要調整偽元素的寬度：

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

這是另一個可以與任何類型的圖像一起使用的蒙版的想法

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

Answer 2

你可以結合background: linear-gradient()和Flexbox來實現這樣的效果：

 div { display: flex; /* displays flex-items (children) inline */ justify-content: space-around; /* horizontal alignment / icons are evenly distributed with equal space around them, ie all have equal space on both sides, that's why there are two units of space between them / you can also experiment with other values such as: "space-between", "space-evenly", "center" etc. */ align-items: center; /* vertically centered */ height: 100px; background: linear-gradient(to right, #c3986b 45%, #0a4b67 55%); /* adjust the % to your needs, the sum of both needs to evaluate to 100% */ } img {border-radius: 50%}

 <div> <img src="http://lorempixel.com/50/50/" alt="icon1"> <img src="http://lorempixel.com/50/50/" alt="icon2"> </div>

在給定的示例中，我將linear-gradient()設為parent 寬度的10% 。 該數字是通過減去% 、 55% - 45%的兩個值來計算的。

為了增加它的寬度，如果需要，只需增加較大的數字並減少較低的數字，最好以相同的%數量，例如40% / 60% ，使其水平居中。 要減少它的寬度，只需做相反的事情。

Answer 3

很好的例子，但是如何將其更改為水平底部和頂部而不是垂直

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