1

我有以下情况（我会将 CSS 嵌套在 HTML 中以节省相同的空间）：

<body style="background: url('someimage.png')">
   <div style="background: white">
      <header style="opacity:0.6">
      </header>
      <article></article>
   </div>
</body>

我希望不透明度适用于身体的背景，而不是 div 的背景。而且没有办法让 div 的背景透明。我正在寻找如下图所示的效果。我有一个带有图像背景的主体，然后是一个 div，其中包含标题、文章和我没有包含的更多内容，但主 div 有背景白色，我希望标题从主体的背景中具有这种透明效果. 同时，我正在寻找一种响应式解决方案，因此 Photoshop 将无济于事（我认为）。

标题和文章都包含在单个 div 中

你要建议什么？谢谢。

这是一个wordpess主题的主要问题，我不想弄乱HTML结构，我需要一个CSS解决方案。

4

1 回答 1

2

就样式而言，将以下article内容分开处理header：

<body style="background: url('someimage.png')">
    <div>
        <header style="background:rgba(0,0,0,0.6);border-radius:5px;">
        </header>
        <article style="background: white">
        </article>
    </div>
</body>

问题编辑前的原始答案：

应用opacity:0.6到<header>只会使其<header>及其所有子项透明。不是解决方案。

应用opacity:0.6to<body>也将使其所有子级透明。不是解决方案。

解决方案：将透明度添加到someimage.png图像中作为嵌入的 Alpha 通道，甚至在 CSS 中使用它之前。

于 2013-09-23T22:36:17.127 回答