CSS3 中支持使用復(fù)合屬性來(lái)添加圖片，這可以大大簡(jiǎn)化代碼量，并且讓代碼更加易于維護(hù)。下面我們來(lái)看一下如何使用 CSS3 的復(fù)合屬性添加圖片。

/* 使用 background 復(fù)合屬性添加圖片 */
div {
background: url('img.jpg') no-repeat center center;
background-size: cover;
}
/* 使用 background-image 和其他 background-* 屬性添加圖片 */
div {
background-image: url('img.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

上面兩種方法都可以添加背景圖片，其中第一種方法使用了background屬性，這個(gè)屬性包含了多個(gè)子屬性，包括背景圖片的地址、重復(fù)方式、位置、尺寸等。第二種方法則是分別使用了background-image、background-repeat、background-position和background-size這幾個(gè)屬性來(lái)完成同樣的效果。

需要注意的是，在使用background-size屬性時(shí)，可以指定具體的尺寸，比如background-size: 200px 300px;，也可以使用 cover 或 contain 來(lái)自適應(yīng)容器大小。

除了使用background和background-*屬性外，我們還可以使用content屬性來(lái)添加圖片，如下所示：

/* 使用 content 屬性添加圖片 */
div:before {
content: url('img.jpg');
display: block;
width: 100px;
height: 100px;
}

在上面的例子中，我們使用了before偽元素和content屬性來(lái)插入一張圖片。需要注意的是，這種方法只能插入圖片，不能設(shè)置其他樣式。

總的來(lái)說(shuō)，使用 CSS3 的復(fù)合屬性來(lái)添加圖片是一種簡(jiǎn)單、高效且易于維護(hù)的方式，能夠幫助我們更好地管理代碼。希望這篇文章對(duì)你有所幫助。