1個標籤中的背景圖像和背景

是否可以將背景圖像和背景漸變顏色一起應用到1個div標籤中？（CSS3及以上版本）1個標籤中的背景圖像和背景

我有下面的代碼，漸變背景顏色顯示，但背景圖像沒有。
我錯過了什麼？

background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#2e2e2e)); 
background-image:url('/uploads/image1.jpg') no-repeat; 
-webkit-background-size: 33px 33px; 
border-bottom:1px solid #636363; 
height:39px; 
-moz-border-radius-bottomleft:0px; 
-webkit-border-bottom-left-radius: 0px; 
-moz-border-radius-topright:10px; 
-webkit-border-top-right-radius: 10px;

感謝，
三通

來源

2010-06-01 teepusink

參見：http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image -and-css3-gradients – nico 2010-06-01 07:02:35

我一直都在使用它，因爲我非常喜歡css3。爲避免任何複雜情況，我建議您只需使用css3漸變和標籤。儘管付出了很大的努力，所有嘗試製作完全跨瀏覽器兼容的多種後臺解決方案都失敗 – 2012-02-20 03:52:21

梯度屬性是背景的模塊的一部分，所以你需要指定背景圖片，而不僅僅是背景。

你會想要使用背景大小，以確保背景不是全高。

舉個簡單的例子，看看www.Dartrite.co.uk。

來源

2010-06-01 07:04:10

漸變是可用於代替圖像的值。有了背景，漸變是背景圖像屬性的值。因此，您不能同時擁有圖像和漸變（儘管您可以先指定圖像，然後使用支持漸變的瀏覽器的漸變聲明來覆蓋它）。

來源

2010-06-03 16:45:36

使用：在&之後：在僞選擇器之前，最多可以有3個不同的背景，分層：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/。希望這可以幫助！

來源

2011-06-23 19:07:56

是的，你可以使用背景圖片與梯度，就像這樣：

.example { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, linear-gradient(45deg, #000, #F00) repeat scroll 0% 0% transparent; 
 
}

<div class="example"></div>

差不多隻用兩個逗號分隔值background速記屬性。

來源

2013-03-27 03:14:51 apaul

它的做工精細檢查

.example { 
 
    background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, transparent linear-gradient(45deg, #000, #f00) repeat scroll 0 0; 
 
border-bottom: 1px solid #636363; 
 
border-bottom-left-radius: 10px; 
 
border-top-right-radius: 10px; 
 
height: 200px; 
 
width: 200px; 
 
}

<div class="example"></div>

來源

2015-11-21 10:29:39 Ram

1個標籤中的背景圖像和背景

回答

相關問題