Question

我很快就遇到了一些麻烦 - 就是背景css元素的排序。

我有以下内容：

background-color: #3C3E89; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */
background-image: url('../images/logo.png');
background-size: cover;

由于某种原因，png - 虽然它有透明层 - 覆盖了我喜欢它的线性渐变。

我有一点点根源，看看正确的方法是什么，尝试了它们，没有运气。我想知道是否有人在渐变背景上覆盖png的尝试和测试方法......

我确定每个人都会尖叫我说这是一个重复的问题 - 但除非我错过了一些我无法成功实施他们的建议。

更新

我也尝试了以下内容：

background-image:
  -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
  linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
  url('../images/logo.png');

和...

background:
  -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
  linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
  url('../images/logo.png');

Answer 1

您可以通过设置background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4);来覆盖背景。相反，您需要使用多个背景：

create-react-app

根据https://developer.apple.com/documentation/foundation/filemanager.searchpathdirectory背景，从最近到最远的地方画出。所以在你的情况下，首先应该在渐变上绘制图像。

Answer 2

线性渐变的行为与background-image相似，因为您也可以使用此语法：

.content {
  background-image: linear-gradient(#3C3E89, #6265E4);
  height:200px;
}

<div class="content">
</div>

这就是为什么你的CSS背景图像规则覆盖了它。相反，您需要指定多个这样的背景：

.content {
  height: 200px;
  background: linear-gradient(#3C3E89, rgba(98, 101, 228, 0.21)), url(https://lorempixel.com/200/100/);
}

<div class="content">
</div>

您应该注意订单。在我的示例中，渐变位于图像上方，因为它来自第一个，并且我添加了一些不透明度以便能够看到图像。如果您使用纯色和/或没有透明度的图像，您将只能看到第一个背景。

CSS背景渐变与图像覆盖

2 个答案: