如何在一個div標籤中執行多個backrounds？

第一關：http://jsfiddle.net/83FDf/如何在一個div標籤中執行多個backrounds？

我設置爲我的「菜單的」底色的圖像......它藍色漸變，圓潤的邊角，然後在底部有白下藍菜單輕微的陰影。

my image

是否有可能使用一個DIV純CSS重建呢？

HTML：

<div class="main_content"></div>

CSS：

.main_content 
{ 
    width:900px; 
    height:auto; 
    background:url(http://i.imgur.com/mionT7y.jpg) no-repeat center top #fff; 
    margin:0 auto; 
    padding:0 0 50px; 
}

來源

2013-04-06 user2058041

這的確是可能的，注意，對於陰影和漸變所需的規則的金額是由於需要不同的語法不同的瀏覽器（-moz-是Firefox供應商前綴等）。這裏有一些方便的工具，用於輕鬆提出跨瀏覽器漸變和框陰影。

瞭解更多關於線性漸變，在這裏框陰影：

jsFiddle

.main_content 
{ 
    width:100%; 
    height:auto; 
    margin:0 auto; 
    padding:0 0 50px; 
    /*background-color:#00F;*/ 

    /* Add rounded border to top left and top right */ 
    border-top-left-radius:6px; 
    border-top-right-radius:6px; 

    /* Apply the gradient as a background image */ 
    background-image: linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%); 
    background-image: -o-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%); 
    background-image: -moz-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%); 
    background-image: -ms-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%); 
    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     left top, 
     color-stop(0, rgb(79,110,189)), 
     color-stop(1, rgb(44,188,207)) 
    ); 

    /* Apply white shadow on bottom */ 
    -webkit-box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.75); 
    -moz-box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.75); 
    box-shadow:   0px 4px 10px rgba(255, 255, 255, 0.75); 
} 

body { 
    margin:0; 
    background-color:gray; 
}

來源

2013-04-06 05:30:51

您可以添加大型描述性評論，以便其他人（以及我，主要是我......）可以從中學習？ – user2058041 2013-04-06 05:38:40

詳細介紹了一下，並添加了更多質量的鏈接，它最多隻是供應商的前綴。 – 2013-04-06 05:48:25

'box-shadow：0px 4px 10px #FFF;'在上面的例子中工作正常，它實際上以75％的透明度出現，儘管它有點不同。你不能做十六進制和alpha。 – 2013-04-06 05:52:33

什麼，我理解你的問題，你可以在你的CSS使用逗號分隔形式的多張圖片，並給他們的位置太：

背景圖像：網址（../ pix/logo_quirksmode_inverted.gif）;

來源

2013-04-06 05:31:40 AnkushRanka

如何在一個div標籤中執行多個backrounds？

回答

相關問題