css 背景颜色属性

Question

此语法在 css 背景属性中运行良好：

 .my-element {
          background:
            linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.8) ),
            url('img/background.jpg')
}

虽然我不需要渐变。我希望叠加层来自一种具有一定程度不透明度的颜色。我知道我可以让起始颜色与渐变的结束颜色相同，但是是否可以将 'linear-gradient' 替换为仅包含不透明度的 rgba 颜色？好像不行。

编辑：我的问题可能不清楚。我想要的是：

.my-element {
              background:
                color(rgba(131,131,131,0.8),
                url('img/background.jpg')
    }

以上方法无效。我也不能对颜色使用十六进制表示法，因为它不包括不透明度。

Answer 1

你想要这样的东西吗？

     .my-element {
              background: linear-gradient(#e66465, #9198e5),
                url('img/background.jpg')
    }

   .my-element2 {
              background:
                linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.1) ),
                url('img/background.jpg')
    }

 <div class="my-element">My element color</div>
<br>
 <div class="my-element2">My element color</div>

Answer 2

添加绝对叠加颜色：

<div class="my-element"><div class="overlay"></div>My element color</div>

和CSS：

.my-element {
    background: url('img/background.jpg')
    position: relavive;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(200, 200, 200, 0.8);
    pointer-events: none;
}

.my-element {
    background: url('img/background.jpg')
    position: relavive;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(200, 200, 200, 0.8);
    pointer-events: none;
}

<div class="my-element"><div class="overlay"></div>My element color</div>

Answer 3

你有两种可能。

要么考虑一个CSS变量来优化代码，避免颜色重复两次：

.box {
  --c:rgba(131,131,131,0.8);
  
  height:300px;
  width:300px;
  background:
    linear-gradient(var(--c),var(--c)),
    url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover;
}

<div class="box"></div>

或使用混合，但您可能不会得到完全相同的结果，您需要根据使用的颜色调整混合值：

.box {
  height:300px;
  width:300px;
  background:
    url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover,
    rgba(131,131,131,0.8);
  background-blend-mode: exclusion;
}

<div class="box"></div>

css 背景颜色 属性

css background color property

css

background

css 背景颜色属性