css 2个背景,是否有可能在CSS中组合2个背景颜色？(Is it possible to combine 2 background colors in css?)...

是否有可能在CSS中组合2个背景颜色？(Is it possible to combine 2 background colors in css?)

我有一个渐变背景色的元素，

.foo{

background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);

width:250px;

height:250px;

}

我需要在它的顶部添加一个渐变叠加层 - 所以它看起来像这样：

正如你所看到的 - 它从左到右渐变 - 在条纹的顶部。

我尝试过使用它来添加它：after - 并且它正在工作 - 但是我已经有了这个元素的伪元素 - 所以它覆盖了它。 是否有可能增加一个：元素之后？ 或者也许他们是一个更好的方式来实现只有Css的效果？ (没有js请)。

谢谢

I have an element with gradient as background color,

.foo{

background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);

width:250px;

height:250px;

}

I need to add an overlay of gradient on the top of it - so it will looks like this :

As you can see - it's got gradient from left to right - on the top of the stripes.

I've tried add it by using :after - and it's working - but i already have pseudo element for this element - so it's override it. Is it possible to add more then one :after element? or perhaps their is a better way achieving that effect with only Css ? (no js please).

Thanks

原文：https://stackoverflow.com/questions/48396927

更新时间：2019-12-24 10:34

最满意答案

这是可能的，当且仅当覆盖层将变成纯色。 您只需在基础重复线性渐变上叠加额外的水平渐变，使#7cd4cf淡出为不透明度0。

顶层：从左侧不透明度为1的#7cd4cf开始的线性渐变，以右侧的不透明度0结束

底层：您的原始图案

考虑到这一逻辑，顶层可以像这样编码： linear-gradient(90deg, rgba(124,212,207, 1), rgba(124,212,207,0)) 。 请注意#7cd4cf的相应rgb颜色是rgb(124,212,207) 。

请注意，背景图像从下到上堆叠，即最后指定的背景图像将位于堆栈的底部。

.foo {

background-image:

linear-gradient(90deg, rgba(124, 212, 207, 1), rgba(124, 212, 207, 0)),

repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);

width: 250px;

height: 250px;

}

That's possible, if and only if the overlay is going to be a solid color. You simply overlay an additional horizontal gradient over the underlying repeating linear gradient, with #7cd4cf fading out to opacity of 0.

Top layer: a linear gradient starting with #7cd4cf at opacity 1 from left, ending with opacity 0 on the right

Bottom layer: your original pattern

With that logic in mind, the top layer can be coded like this: linear-gradient(90deg, rgba(124,212,207, 1), rgba(124,212,207,0)). Note that the corresponding rgb colors of #7cd4cf is rgb(124,212,207).

Note that background-images stack from bottom to top, i.e. the last specified background image will be at the bottom of the stack.

.foo {

background-image:

linear-gradient(90deg, rgba(124, 212, 207, 1), rgba(124, 212, 207, 0)),

repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);

width: 250px;

height: 250px;

}

相关问答

请参阅下面的CSS跨浏览器代码： .bar {

height: 10px;

width: 350px;

background: -webkit-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%,

...

这是可能的，当且仅当覆盖层将变成纯色。 您只需在基础重复线性渐变上叠加额外的水平渐变，使#7cd4cf淡出为不透明度0。 顶层：从左侧不透明度为1的#7cd4cf开始的线性渐变，以右侧的不透明度0结束 底层：您的原始图案 考虑到这一逻辑，顶层可以像这样编码： linear-gradient(90deg, rgba(124,212,207, 1), rgba(124,212,207,0)) 。 请注意#7cd4cf的相应rgb颜色是rgb(124,212,207) 。 请注意，背景图像从下到上堆叠，

...

尼普斯是对的。 position: relative对于＃wrap2。 http://jsfiddle.net/MSZXa/22/ Neps is correct. position: relative on #wrap2. http://jsfiddle.net/MSZXa/22/

你可以依靠CSS变量来做这样的事情： :root {

/* The default gradient is transparent */

--c:linear-gradient(transparent,transparent)

}

.a,.c {

height:150px;

width:150px;

display:inline-block;

background-image:var(--c),url(https://lorempixel.com/400/2

...

如果我理解你所寻找的是什么，你不希望背景与div的颜色相同，但是你希望它与“关节”对齐而不管窗口的宽度，即使内容div是一个居中的一部分，固定宽度的容器。 以下解决方案看起来似乎没有在所有浏览器中测试(花了我几个小时来解决)。 HTML：

...