Question

我是一个CSS3菜鸟，刚刚开始使用不同的网络示例，所以请原谅我这个问题是愚蠢还是太基础（我们都需要学习一段时间！）

我有一个简单的示例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

是的，引用。例如：background: #00ff00 url('Mom206x206.jpg')
不同的课程会更清洁

Answer 2

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>

CSS3 DIV有不同的背景

2 个答案: