使div元素背景對背景圖像透明CSS

我想在我的網站內製作視差效果，但是我無法將DIV元素的背景設置爲透明，儘管使用了background-color: transparent。使div元素背景對背景圖像透明CSS

本質上，我想單獨顯示DIV中的文本，並刪除背景顏色。

通過使用W3Schools的..

body, html { 
 
     height: 100%; 
 
    } 
 
    
 
    .parallax { 
 
     /* The image used */ 
 
     background-image: url('http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg'); 
 
    
 
     /* Full height */ 
 
     height: 100%; 
 
    
 
     /* Create the parallax scrolling effect */ 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
    } 
 
    
 
    .parallax2 { 
 
     /* The image used */ 
 
     background-image: url('http://www.qygjxz.com/data/out/114/4676052-image.png'); 
 
    
 
     /* Full height */ 
 
     height: 100%; 
 
    
 
     /* Create the parallax scrolling effect */ 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
    } 
 
    
 
    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */ 
 
    @media only screen and (max-device-width: 1024px) { 
 
     .parallax { 
 
      background-attachment: scroll; 
 
     } 
 
    }>

 
 
    <div class="parallax"></div> 
 
    
 
    <div style="height:100px;background-color:transparent;font-size:36px"> 
 
    Some text goes here, need to try to make the background of this transparent? Any ideas? 
 
    </div> 
 
    
 
    <div class="parallax2"></div>

謝謝

來源

2017-07-23 Test1234

該div應該站在容器的一個範圍內，否則你們之間有100px的差距。添加一個BG到身體找出.... https://codepen.io/gc-nomade/pen/QMWLGL –

如果您想將背景色設置爲透明，您可以執行所有這些操作。

background-color: ; background-color: transparent; background-color: rgba(0, 0, 0, 0);

但在這種情況下，你需要在這裏設置一個不同的位置的代碼，我希望這是你要找的人

<div style="height:100px;font-size:36px; border:1px solid red; position: absolute;"> 
    Some text goes here, need to try to make the background of this transparent? Any ideas? 
</div>

來源

2017-07-23 13:36:43

謝謝，好像我忘記把位置設置爲絕對 – Test1234

如果不指定背景顏色到您的div，它會自動透明。這是默認設置。我做了一個jsfiddle並進行了測試以確保。

<div style="height:100px;font-size:36px; border:1px solid red;"> 
    Some text goes here, need to try to make the background of this transparent? Any ideas? 
    </div>

如果由於某種原因，沒有工作，我會做在Photoshop中一個2×2的透明PNG，並指定作爲背景色，在X和Y兩個方向上重複。

這不是一個標準的解決方案，但肯定會工作。：D

來源

2017-07-23 12:56:13

這隻作爲第一個圖像是本地的，並沒有出現在該測試。它仍然是這樣的：[link]（https://jsfiddle.net/6nc1d719/） – Test1234

它沒有任何背景，據我所知。你爲什麼認爲有任何背景？ –

使div元素背景對背景圖像透明CSS

回答

相關問題