我如何設置HTML和CSS透明的背景圖片？

嗨，我想設置我的背景圖像透明，其餘的內部不是！我可以這樣做嗎？我與引導工作...我如何設置HTML和CSS透明的背景圖片？

這裏是我的html

<!-- Startseite Section --> 
    <section id="startseite" class="start-section"> 
     <div class="container"> 
      <h1><span style="opacity: 1.0;">Interne Links</span></h1> 

      <div class="row"> 
       <div class="col-lg-12"> 
        <section id="Startseite" class="pfblock"> 

          <div class="row"> 

          ....//Here are Elements how text and divs 

          </div> 

        </section> 
       </div> 
      </div> 
     </div> 
    </section>

這裏的分裂是CSS拆分：

.start-section { 
    height: 100%; 
    padding-top: 150px; 
    text-align: center; 
    /*background: #fff;*/ 
    background-image:url('../img/bg.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity: 0.7; 
}

有關信息：不透明度0.7的作品，但然後我得到所有透明:(

來源

2015-06-11 Tarasov

背景圖片不能有混濁。使用支持alpha值的PNG或其他圖像格式。 –

你可以添加一個元素在你的.start-section div後面具有相同的尺寸，並且只包含背景圖片。然後，您可以將該元素設置爲.7不透明度並使您的.start-section div處於完全不透明狀態，以正常顯示其內容。

來源

2015-06-11 13:23:51 Raptord

沒有CSS屬性background-opacity，但是您可以通過插入一個具有常規不透明度的僞元素和它後面元素的確切大小來僞造它。

您可以添加

.start-section::after { 
content: ""; 
background: url(image.jpg); 
opacity: 0.5; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
position: absolute; 
z-index: -1; 
}

來源

2015-06-11 13:28:13

我如何設置HTML和CSS透明的背景圖片？

回答

相關問題