我正在尝试使用透明度(不透明度)使图像变暗，以便更好地阅读前景文本。
这是我的标题 HTML:
.header-image {
display: block;
width: 100%;
text-align: center;
/* image must be 1900 x 500 */
background: url('back.1.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 1.0;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}<header class="header-image" style="background: url(' URL TO IMAGE') center no-repeat; background-size: cover;">
<div class="headline">
<div class="container">
<h1>Headline</h1>
</div>
</div>
</header>您会看到我添加了“不透明度:1.0；”在“header-image”的最后一行，但没有用。
知道我哪里出错了吗？
谢谢
最佳答案
嗯，你不想改变整个 div 的过渡，我猜只是一张图片。您应该使用::before 伪元素放置它。现在所有的 css 属性将只适用于::before:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headlines</h1>
</div>
</div>
</header>
</body>
</html>
CSS:
.header-image {
position: relative;
overflow: hidden;
height: 180px;
}
.header-image:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.headline {
}
.headline h1 {
position: relative;
z-index: 1;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.3);
color: #FCFCFC;
margin: 0;
}
关于html - 尝试为背景图像添加透明度不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46437713/