繁体   English   中英

渐变混合多个图像

Gradient Blend Multiple Images

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

如何使用 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>
2 个回复

您可以使用一些放置在两个图像之间的伪元素并在其上应用线性渐变。 通过使用相同的颜色,您将创建此效果。 您可能会注意到该解决方案将通过使用背景颜色背景图像来工作,您只需要尊重背景中使用的颜色并将它们应用于伪元素。

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

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

你可以结合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% ,使其水平居中 要减少它的宽度,只需做相反的事情。

很好的例子,但是如何将其更改为水平底部和顶部而不是垂直

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

2 使用php GD库将透明渐变与图像混合

我尝试在图像上渲染渐变,它需要从全彩色到透明,这是我的代码。 我得到黑色图像,如果我开始多一点,那么0我得到白色渐变,但是没有图像。 输出图像为338x100像素,但如果图像较窄,则输入图像需要右对齐。 我使用gradient.php?start=20&amp;stop=200&am ...

3 在图像中混合渐变填充角的算法

我需要在图像周围放置一个alpha混合渐变边框。 我的问题是混合角落,使它们在水平和垂直渐变相遇的地方是平滑的。 我相信有一种标准算法可以解决这个问题。 我想我甚至多年前在学校遇到过它。 但是我在几次网络搜索中找不到任何一个引用都没有成功。 (我在角落里实现了一个径向填充图案,但转 ...

5 如何使用渐变和叠加混合模式创建图像?

我有下一个任务: 从服务器,我得到一种颜色的十六进制值。 然后我需要使用这个值制作一张图片。 为此,需要使用构建渐变的规则。 有两层。 第一层在这个十六进制中有一个背景颜色,但它也必须处于混合模式:叠加。 在它上面叠加了一个具有三种颜色渐变的图层。 起始颜色 - 不透明度为 0% 的十六进制,中心 ...

2020-09-18 10:39:11 0 29   android
6 如何在 Flutter 中混合多个渐变?

设计师在他们创建的 Figma Design 中组合了两个或多个渐变。 在一些设计中,他们结合了径向渐变和线性渐变; 而其他一些设计,他们结合了线性渐变和另一个线性渐变。 这是可以用 CSS 轻松完成的事情,但是在 Flutter 中,我无法实现它。 我已经阅读了几乎所有 Flutter 文档,但 ...

7 单个渐变到多个图像

我会得到这个结果: 图像 图像将在没有背景和黑色的PNG中裁剪,就像单独的图像中的渐变一样,它可以用CSS吗? ...

8 CSS多个背景(图像和渐变)

好的,基本上,我已经在photoshop中创建了一个设计,它的噪点背景具有居中的径向渐变(以创建一些光线)。在CSS中创建此效果并允许所有浏览器支持的最佳方法是什么? ...

2011-12-27 18:54:52 3 275   html/ css
10 与多个图像交叉渐变CSS

我正在尝试制作一个看起来像这样的横幅: https : //youtu.be/yQbtmsB9dB0 但是,带有边框的图片不会按顺序和过渡显示在屏幕上。 我不得不进行交叉淡入淡出的过渡,但是我被困了几个小时。 这是我的HTML&Javascript&CSS代码。 参见: htt ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM