設置背景顏色和背景圖像在CSS

我有過我的背景色設置背景圖片的一個問題：這是我的例子中，這樣就可以明白我的意思：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圖片標記，它會容易得多，但有幾個原因我不想使用它。

來源

2012-08-10 Dexter Schneider

試試這個 - 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/

來源

2012-08-10 19:58:20

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

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

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

你不能只是增加no-repeat到background-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;

來源

2012-08-10 20:02:34 cjol

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

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

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

Here's the fiddle。

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

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

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

更新了小提琴。

來源

2012-08-10 20:02:45 transparent

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

設置背景顏色和背景圖像在CSS

回答

相關問題