multiple backgrounds 多重背景

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

注意：用逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；分解写法时，background-color只能设置一个。

例如：

background:url(./image.jpg) no-repeat left top / 200px 70px,url(./image.jpg) no-repeat right bottom / 150px 60px;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>多重背景</title>

<style type="text/css">

.demo {

    width: 300px;

    height: 140px;

    border: 1px solid #999;

    background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top / 200px 70px,

    url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 150px 60px;

}

</style>

</head>

<body>

<div class="demo"></div>

</body>

</html>

巴特西

multiple backgrounds 多重背景

最新文章

热门文章