2012-08-10 186 views
1

我有過我的背景色設置背景圖片的一個問題:這是我的例子中,這樣就可以明白我的意思:JSFiddle設置背景顏色和背景圖像在CSS

現在這裏是功能CSS部分:

#tancan{ 
    background-color: #ebebeb; 
    background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg'); 
} 

正如你可以在JSFiddle中看到的那樣,背景圖像重複出現。如果我使用無重複作爲屬性,圖像將消失。

另外,我希望背景圖像向右漂移,如果圖像比包含div大,如何使它適合比例適合? - 就像你會使用width: 100%height: 100%來製作圖像標記<img/>

我不想使用HTML圖片標記,它會容易得多,但有幾個原因我不想使用它。

回答

6

試試這個 - http://jsfiddle.net/vmvXA/17/

#tancan { 
    background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right; 
} 

,並讓背景圖像不超過其父容器,你可以使用background-size: contain - http://jsfiddle.net/vmvXA/22/

+0

太棒了,謝謝。但有兩個問題,如果圖像大於div尺寸(如果使用tancan.jpg而不是tancan2.jpg來查看我的意思......),我該如何居中呢?另外,您使用的是這種風格:background:#color url();與IE7和8之類的舊版瀏覽器兼容? – 2012-08-10 20:03:52

+0

是的,CSS快捷方式向後兼容,直到IE4和Netscape導航:)還用'background-size:contains'更新了答案。# – 2012-08-10 20:05:05

+0

@ZoltanToth哈哈,男人。你以前發佈過。 – transparent 2012-08-10 20:08:04

2

你不能只是增加no-repeatbackground-image,因爲background-image是僅指圖像本身的特定屬性。如果你想給它的所有加在一個聲明中,然後設置background

background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right; 

或保持它的所有獨立的,給你:

background-color: #ebebeb; 
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg'); 
background-repeat: no-repeat; 
background-position:top right; 
background-size: contain; 
+0

非常感謝,深入洞察 – 2012-08-10 20:05:50

+0

您可以縮放背景,配合。 :)隨着背景大小。查看我的答案以獲取更多見解。 :D – transparent 2012-08-10 20:14:20

+0

你說的很對,我更新了我的代碼,但沒有評論.. – cjol 2012-08-10 20:50:14

2

Here's the fiddle

background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top; 

爲了縮短代碼,可以在一個屬性中指定所有設置。這被稱爲「速記屬性」。

要使所有的照片適合它的父母添加樣式屬性background-size:contain;

更新了小提琴。

+0

感謝隊友。這種速記是否支持IE7和8等較老的瀏覽器? – 2012-08-10 20:05:10