如何在我的CSS中创建一个例外

Question

我对HTML和CSS颇为陌生，所以这可能是一个相当新手的问题，或者我可能有一些乱码。以下是我的网页首页div的HTML;

<div id="header" class="hero container mainfrontimage"> 
      <h3>WEBSITE TITLE </h3> 
      <img src="../images/Logo.png" id="headerimg"> 
      <div class="buttons"><a class="btn btn-alt" href="../3 Join us/joinus.html">JOIN US</a> <a href="../6 Shop/shop.html" class="btn btn-alt">SHOP</a></div> 
     </div> 

和CSS ..

#header { 
    background: url('../images/WEBSITE TITLE pics/placeholder2.jpg') no-repeat; 
    background-size: 100%; 
    border-top: 4px ridge #E0CC95; 
    border-bottom: 4px ridge #E0CC95; 
    opacity: 0.75; 
} 

本质头编号填满了我的背景图片的股利正是我想它，用正确的不透明性和风格。但是，因为HTML中的标题，徽标和按钮都包含在内，所以它们也变得不那么透明。我想知道是否有一些方法可以使图像不透明，边界等，并且文本不会受到影响 - 例外。

我试过把标题，标志和按钮放到一个单独的div中，但因为图像本身在CSS中，这意味着id =“header”的原始div是空的。这不会使很多有意义并且不起作用。

对不起，如果这是一个巨大的混乱，我真的很新。如果有人知道我在问什么，可以提供解决方案，我会非常感激！

Answer 1

如果您只想控制不透明度背景图像，而不是内容，则不要将背景图像直接应用于div。相反，使用下面的伪元素。

<div id="header" class="hero container mainfrontimage"> 
    <h3>WEBSITE TITLE </h3> 
    <img src="../images/Logo.png" id="headerimg"> 
    <div class="buttons"><a class="btn btn-alt" href="../3 Join us/joinus.html">JOIN US</a> <a href="../6 Shop/shop.html" class="btn btn-alt">SHOP</a></div> 
</div> 

#header { 
    position: relative; 
    border-top: 4px ridge #E0CC95; 
    border-bottom: 4px ridge #E0CC95; 
} 

#header::after { 
    content: ""; 
    background: url('../images/WEBSITE TITLE pics/placeholder2.jpg') no-repeat; 
    background-size: 100%; 
    opacity: 0.75; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}