Question

伙计们，我尝试使用z-index和其他定位将背景色透明地放在背景图像的前面，但是我失败了。任何人都可以提出解决问题的想法。非常感谢你。

body, 
html {
  margin: 0;
  padding: 0;
}
html {
    background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
}

body {
    background-color: rgba(201, 76, 76, 0.5);
    z-index: 1;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jury Portfolio</title>
</head>
<body>

</body>
</html>

Answer 1

在正文和html上添加100％的高度。问题是您的身体元素的高度为0。因此背景色不可见。

因为body已经是html的子代，所以不需要z-index。

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  background-color: rgba(201, 76, 76, 0.5);
  
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Jury Portfolio</title>
</head>

<body>

</body>

</html>

Answer 2

使用多个背景，无需定义高度。只需依靠background propagation：

html,body {
 margin:0;
 padding:0;
}
html {
    background-image: 
     linear-gradient(rgba(201, 76, 76, 0.5),rgba(201, 76, 76, 0.5)),
     url(https://i.stack.imgur.com/cEz3G.jpg);
    background-size: 100px 100px,cover;
    background-repeat: repeat,no-repeat;
    
}

Answer 3

请尝试以下操作：-

body, 
html {
margin: 0;
padding: 0;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(201, 76, 76, 0.5);
}

如何优先使用颜色而不是图像背景

3 个答案: