CSS背景图像颜色叠加

这工作：CSS背景图像颜色叠加

.header { 
    background: linear-gradient(to bottom, rgba(100, 100, 100, 1.0), rgba(0, 0, 0, 0.1)), url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg"); 
    height: 400px; 
    background-position: center center; 
}

然而，这不起作用：

.header { 
    background: rgba(100, 100, 100, 0.5), url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg"); 
    height: 400px; 
    background-position: center center; 
}

任何人有任何理由解释吗？为什么不能我只是RGBA图像略带颜色叠加而不使用线性渐变？

请不要杀了我，完成初学者。

来源

2017-07-30 firestarter88

如果你使用一个简单的颜色（例如，如果它是一个'RBGA'值，它将被读为一种颜色。如果您使用渐变，则输出为图像。当你使用一个简单的颜色时，你不需要图像的'RGBA'值和'url'之间的逗号，但它将是一个**后备背景**而不是覆盖 - 它会渲染到一旦加载图像 - 这是除非你指定'background-blend-mode'属性中的其他东西。如果您使用渐变，那么由于输出是图像，因此需要使用逗号。你的问题是语法。为什么不为覆盖使用伪元素？ –

被标记的伪装与这个问题无关。 –

为什么这个帖子被标记为与不相关的问题链接重复？无论如何，这是对你的一种回答。 https://css-tricks.com/tinted-images-multiple-backgrounds/ –

您可以使用这样的代码：

这里ID工作演示：https://output.jsbin.com/voyotep

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="layer"></div> 
</body> 
</html>

CSS：

html { 
    background:url('https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg'); 
    min-height:100%; 
    background-size:cover; 
    position: relative; 
} 

.layer { 
    background-color: rgba(100, 100, 100, 0.5); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

来源

2017-07-30 19:44:19

虽然这可以解决问题，但实际上并没有回答问题 –

感谢您的演示，这是解决此问题的另一种方法，即在图像上添加叠加层。我喜欢你的解决方案，因为使用线性渐变，并粘贴相同的颜色两次似乎犹太人区解决方案。但它实际上并不是问题:) – firestarter88

只需在'background：rgba（100，100，100，0.5）'这样的''后面删除''，''，'这样的 '.header { background：rgba（100， 100，0.5）url（“https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg”）; height：400px; background-position：center center; }' –

CSS背景图像颜色叠加

回答

相关问题