您的位置：首页 > Web前端 > CSS

CSS3 background

2017-08-12 21:45 316 查看

background多背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {background: url(img/billiard.png),url(img/medal.png) ;
background-size: 300px 300px;
width: 300px;height: 300px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>


效果如图：



background-origin:

background-origin 属性规定背景图片的定位区域

三个值：

padding-box:背景图片相对于内边距框来定位

border-box:背景图片相对于边框盒来定位

content-box:背景图片相对于内容框来定位

1.padding-box

<style type="text/css">
#div1 {
border: 30px dotted #eee;
padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;
background-repeat: no-repeat;
background-size: 200px 200px;
background-origin: padding-box;
}
</style>


效果如下图：这是从padding开始定位背景图片



2.border-box

<style type="text/css">
#div1 {
border: 30px dotted #999;
padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;
background-repeat: no-repeat;
background-size: 200px 200px;
background-origin: border-box;
}
</style>


背景效果如下：



3.content-box

<style type="text/css">
#div1 {
border: 3px dotted #999;
padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;
background-repeat: no-repeat;
background-size: 200px 200px;
background-origin: content-box;
}
</style>




background-clip

background-clip规定背景的绘制区域

有三个属性值：

border-box:背景被裁减到边框盒

padding-box:背景被裁减到内边框距

content-box:背景被裁减到内容框

1.border-box

<style type="text/css">
#div1 {
border: 30px dotted #999;
padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;
background-repeat: no-repeat;
background-size: 200px 200px;
background-origin: border-box;
background-clip: border-box;
}
</style>


效果图



2.padding-box

<style type="text/css">
#div1 {
border: 30px dotted #999;
padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;
background-repeat: no-repeat;
background-size: 200px 200px;
background-origin: border-box;
background-clip: padding-box;
}
</style>


效果图：



3.content-box

<style type="text/css">
#div1 {
border: 30px dotted #999;
padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;
background-repeat: no-repeat;
background-size: 200px 200px;
background-origin: border-box;
background-clip: content-box;
}
</style>


效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 background
相关文章推荐
新的分享
章节导航