渐变混合多个图像

Question

如何使用CSS将多个图像渐变在某个区域相互混合，如下图所示？

我尝试过的事情：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然而，没有关于背景图像的褪色/过渡，如下图所示：

更新

我的问题没有得到任何可靠的答案，但这段代码似乎是我能够得到的最接近的答案。

来自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

您可以将background: linear-gradient()与 Flexbox 结合使用，以实现以下目标：

＆＃13;

＆＃13;

div {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-around; /* horizontal alignment / icons are evenly distributed with equal space around them, i.e. 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%}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在给定的示例中，我已将linear-gradient() 10％ 父级的宽度。该数字是通过减去%，55% - 45%中的两个值来计算的。

为了增加宽度，如果需要，只需增加较大的数字并减小较低的数字，最好增加%的相同数量，例如 public static bool IsLocalIpAddress(string host) { try { // get host IP addresses IPAddress[] hostIPs = Dns.GetHostAddresses(host); // get local IP addresses IPAddress[] localIPs = Dns.GetHostAddresses(Dns.GetHostName()); // test if any host IP equals to any local IP or to localhost foreach (IPAddress hostIP in hostIPs) { // is localhost if (IPAddress.IsLoopback(hostIP)) return true; // is local address foreach (IPAddress localIP in localIPs) { if (hostIP.Equals(localIP)) return true; } } } catch { } return false; } 。 40％/ 60％，让它水平居中。要减少宽度，请执行相反的操作。