如何在我的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; 
}