为啥会限制您同时使用背景图像和背景颜色？ [复制]

Posted 2023-02-21

【中文标题】为啥会限制您同时使用背景图像和背景颜色？ [复制]

【英文标题】：Why would you be restricted from using both background-image and background-color? [duplicate]为什么会限制您同时使用背景图像和背景颜色？ [复制]

【发布时间】：2021-12-24 23:09:15

【问题描述】：

所以我查看了许多不同的 SO 问题和谷歌结果，但我没有找到我一直在寻找的确切信息。

我有一个背景图像，我想为它做一个透明的颜色叠加。 常见的答案是同时使用 background-image 和 color 属性，甚至在同一行上。但这些选项都不适合我。它根本不允许我同时拥有。即使使用线性渐变而不是颜色也不起作用。

我唯一要做的就是分别使用带有图像/颜色的父/子 div。这令人困惑。

父母有图像，但颜色覆盖是......孩子？如果孩子的颜色没有不透明，那么我根本看不到图像。

谁能帮我理解这种关系以及为什么我不能两者兼得？

.color 
  width: 100%;
  height: 50vh;
  background-color: hsl(277, 64%, 61%);
  opacity: 50%;


.hero 
  background-image: url("https://via.placeholder.com/800");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;

<div class="hero">
  <div class="color"></div>
</div>

【问题讨论】：

您的问题实际上是关于在特定背景属性上设置不透明度，但您几乎没有提及这一点。你应该修改得更清楚。你的标题问题是无意义的，因为你可以。

【参考方案1】：

您不能在单个属性上设置不透明度，只能在元素（和伪元素）上设置。在我看来，您想要一个背景图像，并且您还想要一个背景颜色，并且您希望颜色覆盖图像并降低不透明度。 CSS 不允许这种特殊性。

但是，您可以使用一个标记元素完成您所追求的目标。只需在您的 CSS 中创建一个伪元素：

.color 
  height: 50vh;
  background: url("https://via.placeholder.com/800x200");
  background-size: cover;
  position: relative;


.color:after 
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: hsl(277, 64%, 61%);
  opacity: 50%;

<div class="hero color"></div>

【参考方案2】：

background 是所有背景样式的简写

见CSS: background documentation on MDN:

背景速记 CSS 属性一次设置所有背景样式属性，例如颜色、图像、原点和大小，或重复方法。

您应该尝试background-image 单独设置图片网址。

类似的例子是margin 和margin-left、margin-right、margin-top、margin-bottom。如果您设置了margin，您将覆盖margin-left 的值。

参见下面的示例，.box-3 将失去其背景颜色：

.box 
  width: 200px;
  height: 69px;
  background: #696969 url(https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27) no-repeat;


.box-2 
  background-image: url(https://i.stack.imgur.com/xP24h.jpg?s=48&g=1);
  background-color: #969696;


.box-3 
  background: url(https://i.stack.imgur.com/xP24h.jpg?s=48&g=1) no-repeat;

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>

【参考方案3】：

你只需要一个元素来做你想做的事。

background-image、background-size、background-position、background-repeat 可能都与您的用例相关。

你也可以放一个背景色。

如果您使用组合表单、背景，请注意其中的设置会覆盖其他一些设置。

出于演示目的，此 CSS 说明了所有内容：

background-image: url(your url);
background-size: cover; /* will resize and crop the image as needed to fill the el */
background-position: center center;
background-repeat: no-repeat no-repeat;
background-color: your background color.

请注意，您不能使用渐变（线性、径向或圆锥）作为背景颜色。这些渐变具有图像的个性，只能用于背景图像。但是，您可以在 background-image 值中有多个图像，用逗号分隔，第一个在第二个“上方”，依此类推。

【讨论】：

我知道它们可以组合到用逗号分隔的背景属性中，但是我已经说过该方法对我不起作用，我不知道为什么。

嗨，这里的“他们”是什么？您能否向我们展示一个您正在使用但不起作用的示例 - 一个精确的副本。谢谢。

【参考方案4】：

您的背景图片没有透明度，并且设置为覆盖整个元素。背景颜色已应用，但隐藏在图像后面。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image 背景图像绘制在相互叠加的上下文层上。指定的第一层被绘制为最接近用户。

元素的边框随后被绘制在它们之上，背景颜色被绘制在它们之下。

【讨论】：

话虽如此，您是否同意使用父/子关系是选择的方法？如果是这样，那仍然会让我质疑他们的关系。

并非如此。如果您想在图像顶部添加颜色，则可以在单个元素上使用多个背景图像；您只需要使用单色“渐变”而不是 background-color 属性。但是，它需要至少部分透明才能让图像显示出来。

【参考方案5】：

原则上你可以同时使用。在这种情况下，您应该尝试使用 z-index。 因此，颜色类的 z-index 应该高于 hero。 我认为这应该可以解决问题。 所以，只需添加这个 z-index

.color 
  width: 100%;
  height: 100%;
  background-color: hsl(277, 64%, 61%);
  opacity: 50%;
  z-index: 1;

干杯， 马塞洛