CSS3部门背景不同

我是一个CSS3Noob，刚刚开始使用不同的web示例，所以如果这个问题很愚蠢或太基本，请原谅（我们都必须有时间学习！）

我有一个简单的示例DIV，它的样式如下：

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

}

<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>

两个问题：

1-这是合法语法

background:url（Mom206x206.jpg）

还是应该加引号：

background:url（“Mom206x206.jpg”）

2-我如何使用同一个班级但背景不同？ 或者我需要为我想要的每一个背景制作一个不同的课程

是的，引述一下。例如：

background:#00ff00url（'Mom206x206.jpg'）

不同的班级会更干净

是的，引述一下。例如：

background:#00ff00url（'Mom206x206.jpg'）

不同的班级会更干净

1.-有关文件规定：

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：

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

}

<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>

DIV带背景1
有背景的分区2
有背景的分区3
背景为4的分区
背景资料组5

1.-关于以下内容的文档说明：

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：

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

}

<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>

DIV带背景1
有背景的分区2
有背景的分区3
背景为4的分区
背景资料组5

1-这里只有一个报价。所以如果我有200个有背景图像的盒子，我应该有200个类（还有其他解决方案吗？1-你只有一个引用。因此，如果我有200个带有背景图像的框，我应该有200个类？：（还有其他解决方案吗？你的CSS是否与图像文件位于同一目录中？正常工作：）你在img.bg1开头漏掉了一个点：）像这样

.img.bg1

一切都很好，我通过发现一个不太可能很快被忘记的错误学到了一些新东西：）你的图像文件和CSS在同一个目录下吗？正常工作：）你在img.bg1的开头漏掉了一个点：）像这样

.img.bg1

一切都很好，通过发现不太可能很快被忘记的错误，我学到了一些新东西：）