CSS3 DIV有不同的背景

Question

我是CSS3 noob，刚开始使用不同的网络示例，所以如果这个问题很傻或太基础，请原谅我（我们都必须学习一段时间！）

我有一个简单的例子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-我如何使用同一个班级但背景不同？还是我必须为我想要的每一个背景制作一个不同的类？

Answer 1

1.-关于URL和URI的文档指出：

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>

Answer 2

1. 是的，引用。例如：background: #00ff00 url('Mom206x206.jpg')
2. 不同级别会更干净