CSS3的DIV不同的背景

我是一個CSS3小白，剛剛通過使用不同的網絡的例子開始，所以請原諒我，如果這個問題是愚蠢還是太簡單了（大家都必須學習的某個時候！）CSS3的DIV不同的背景

我有一個簡單例如DIV，它的風格是這樣的：

.img1 { 
    width:206px; 
    height:206px; 
    margin-left: auto; 
    margin-right: auto; 
    background:url(Mom206x206.jpg); 

}

兩個問題：

1 - 這是合法的語法background:url(Mom206x206.jpg)還是不應該把它與報價：background:url("Mom206x206.jpg")

2 - 我如何使用同一班，但具有不同的背景？或者我將不得不爲這個風格的每個背景創建不同的課程？

來源

2014-10-08 Ryan

1.-上URLs and URIs文檔狀態：

一個URI值的格式是「URL（」隨後可選空格（'）或雙引號（「）字符後跟URI本身，然後是可選單引號（'）或雙引號（」）字符，後跟可選空格，後跟「）」。兩個引號字符必須相同。

因此，以下三個是有效的：

background:url(Mom206x206.jpg) 
background:url('Mom206x206.jpg') 
background:url("Mom206x206.jpg")

2：你可以使用一個類來爲個人背景設置的公共屬性和個人類：

/* Common styles */ 
.img { 
    width:206px; 
    height:206px; 
    margin-left: auto; 
    margin-right: auto; 
} 

/* Individual styles */ 
.img.bg1 { background:url(bg1.jpg); } 
.img.bg2 { background:url(bg2.jpg); } 
.img.bg3 { background:url(bg3.jpg); } 
.img.bg4 { background:url(bg4.jpg); } 
.img.bg5 { background:url(bg5.jpg); }

現在你可以有這樣的HTML：

<div class="img bg1">DIV With background 1</div> 
<div class="img bg2">DIV With background 2</div> 
<div class="img bg3">DIV With background 3</div> 
<div class="img bg4">DIV With background 4</div> 
<div class="img bg5">DIV With background 5</div>

來源

2014-10-08 20:09:26

完美，謝謝！ – Ryan 2014-10-08 20:13:27

嗨，它不顯示背景圖片... – Ryan 2014-10-08 20:21:49

你有圖像文件在你的CSS相同的目錄嗎？ – 2014-10-08 20:24:50

是的，在報價中。例如：background: #00ff00 url('Mom206x206.jpg')
不同類將是清潔器

來源

2014-10-08 19:52:53 Joe

1 - 你只有一個罪gle在那裏引用。所以如果我有200箱背景圖像，我應該有200班？ :(有沒有其他的解決方案呢？ – Ryan 2014-10-08 19:55:31

CSS3的DIV不同的背景

回答

相關問題