实例
1. background-size（背景尺寸）
随便找一张图片：
HTML代码：
<body></body>body{
background: url(../img/微信图片_20180116104051.png);
background-size: 500px 100px;
background-repeat: no-repeat;
}
2. background-origin（背景图片定位区域）
背景图片可以放置在如下区域：
例：1. 在content-box区域放置图片
HTML代码：
<div id="aa"></div>/*#aa{
border: 10px solid blue;
padding: 50px;
width: 100px;
height:100px;
background: url(../img/微信图片_20180116104051.png);
background-origin: content-box;
background-repeat: no-repeat;
background-position: left;
}*/
/*#aa{
border: 10px solid blue;
padding: 50px;
width: 100px;
height: 100px;
background: url(../img/微信图片_20180116104051.png);
background-origin: padding-box;
background-repeat: no-repeat;
background-position: left;
}*/
#aa{
border: 10px solid blue;
padding: 50px;
width: 100px;
height: 100px;
background: url(../img/微信图片_20180116104051.png);
background-origin: border-box;
background-repeat: no-repeat;
background-position: left;
}
3. 多重背景（background-image：url（...），url（...）, ...）
HTML代码：
<body></body>CSS代码：
body{
background-image: url(../img/微信图片_20180116104051.png),url(../jquery-easyui-1.5.4/demo-mobile /images/login1.jpg);
background-repeat: no-repeat;
}效果如下：
4. 规定绘制背景的区域（background-cild）
HTML代码：
<div><div>CSS代码：
/*div{
border: 10px solid yellowgreen;
width: 100px;
height: 100px;
padding: 50px;
background-color: blue;
background-clip: border-box;
}*/
/*div{
border: 10px solid yellowgreen;
width: 100px;
height: 100px;
padding: 50px;
background-color: blue;
background-clip: padding-box;
}*/
div{
border: 10px solid yellowgreen;
width: 100px;
height: 100px;
padding: 50px;
background-color: blue;
background-clip: content-box;
}效果如下：
2538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
