使文字背景色不继承CSS

Question

我想让h2的背景与container div的背景图相同，而不是这个规则中继承的背景色。

* {
background-color: black;
}

预期的结果如截图所示

但我得到的是

h2元素的container div有一个图片作为背景。

.container {
background-image: url('./img/some-image.jpg');
}

我试着选择h2标签，并将其背景色设置为none或透明，但没有成功！我想让h2的背景与容器div的背景图相同，而不是继承自该规则的背景色。

Answer 1

就像我在评论中告诉你的那样，你的万能规则 * { background-color: black; } 太激进了。

这是你所期望的吗？

body {
  background-color: black;
  color: lightgray;
}
.container {
  background-image: url('https://i.picsum.photos/id/114/400/300.jpg');
}

<div class="container">
<h2>H2 Title</h2>
<p>Lorem ipsum</p>
</div>

问候

Answer 2

而不是直接写一个背景颜色的变化，做一个div类。