Question

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

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

我希望不透明度适用于身体的背景，而不是div的背景。并且没有办法使div的背景透明。我正在寻找效果如下面的img。我的身体有一个图像背景，然后是一个div包含标题，文章和一些我没有包括的东西，但主要的div有背景白色，我希望标题从身体的背景透明效果。在同一时间我正在寻找一个响应式解决方案，所以photoshop不会帮助（我认为）。

the header and article are wrapped in single div

你会建议什么？感谢。

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

Answer 1

就样式而言，将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.6应用于<body>也会让所有孩子都变得透明。不是解决方案。

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

有没有办法在最后一个之前定义的背景上使用不透明度

1 个答案: