1

所以我查看了许多不同的 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>

4

5 回答 5

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>

于 2021-11-12T16:23:57.030 回答
0

background是所有背景样式的简写

请参阅CSS：MDN 上的背景文档：

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

您应该尝试使用background-image单独设置图像 URL。

一个类似的例子是marginand margin-left, margin-right, margin-top, margin-bottom。margin-left如果您设置，您将覆盖 的值margin。

请参阅下面的示例，其中.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>

于 2021-11-12T16:17:42.593 回答
0

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

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

干杯，马塞洛

于 2021-11-12T16:05:15.097 回答
0

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

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

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

于 2021-11-12T16:06:49.677 回答
0

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

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 值中有多个图像，用逗号分隔，第一个在第二个“上方”，依此类推。

于 2021-11-12T16:09:18.533 回答