时间戳

首页 > 解决方案 > 如何优先考虑颜色而不是图像背景

html - 如何优先考虑颜色而不是图像背景

问题描述

大家好，我尝试使用 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>

标签： htmlcss

解决方案

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

不需要 z-index，因为 body 已经是 html 的子元素。

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>

推荐阅读