使用CSS在包含div的背景圖像上顯示兩個div

如何使用CSS在包含背景圖像的背景圖像上顯示具有背景圖像顏色梯度的背景圖像的兩個div？我試圖用一個asp.net頁面要做到這一點，而生成的HTML看起來像這樣：使用CSS在包含div的背景圖像上顯示兩個div

<div id="TopContainer> 
    <div id="logos"> 
     <div id="logoOne" class="ImgContainer"></div> 
     <div id="logoTwo" class="ImgContainerWide"><div> 
    </div> 
</div>

及相關的CSS是這樣的：

/********************styles for bar across master page-logos,img containers etc.  ********************/ 
#TopContainer 
{ 
    margin:0px; 
    padding:0px; 
    border-radius:15px; 
} 

#logos 
{ 
    width:1024px; 
    height:100px; 
    border-radius:15px; 
    color: -moz-linear-gradient(bottom, #297381, #FFFFFF); 
    color: -ms-linear-gradient(bottom, #297381, #FFFFFF); 
    color: -webkit-linear-gradient(bottom, #297381,#FFFFFF); 
    background:-moz-linear-gradient(bottom, #297381,#FFFFFF); 
    background:-ms-linear-gradient(bottom, #297381,#FFFFFF); 
    background:-webkit-linear-gradient(bottom, #297381,#FFFFFF); 

} 

.ImgContainer 
{ 
    background-image:url(~/images/company-logo.jpg); 
    width:250px; 
    opacity:0.55; 
    border-radius:15px; 
} 

.ImgContainerWide 
{ 
    background-image:url(~/images/company-logo.jpg); 
    width:450px; 
    opacity:0.55; 
    border-radius:15px; 
}

出於某種原因，DIV與圖像背景似乎並沒有顯示出來，因爲當我使用Chrome開發人員工具並使「徽標」div透明時，兩個圖像容器仍然不可見。預先感謝您的幫助。

來源

2012-10-30 Christian

最有可能它不工作，因爲〜只適用於asp.net服務器控件（服務器端），而不是在客戶端CSS。如果它是一個目錄，從你的CSS使用這個代替

background-image:url(../images/company-logo.jpg);

通常〜讓你的根應用程序，所以如果你想要去的根目錄下，用一個簡單的/：

background-image:url(/images/company-logo.jpg);

最後，根據您的情況，你也可以使用絕對路徑（而不是上面的相對路徑），例如：

background-image:url(http://www.yourdomain.com/images/company-logo.jpg);

來源

2012-10-30 01:07:34 Andy

謝謝大家的意見後，〜爲文件路徑是不正確的，我把它調整到 background-image：url（/images/company-logo.jpg）;但是，我剛剛發現我認爲是真正的問題。我沒有設置圖像分割的高度，所以它們只是默認一些微小的值。謝謝您的幫助！ – Christian

使用CSS在包含div的背景圖像上顯示兩個div

回答

相關問題