CSS3（网页背景）
CSS3背景
控制网页中所有场景的背景，包括背景颜色、背景图片等等；
background-size属性
顾名思义：background-size属性规定网页中背景图片的尺寸。
在CSS3之前，网页中背景图片的尺寸往往是图片的实际尺寸，我们无法在网页中规定它的大小尺寸。但是在CSS3中我们可以规定它的尺寸，方便了我们在网页中使用不同尺寸但相同图片的背景。
两种方式：
- 第一种：通过百分比来规定背景图片的尺寸。
background-size: 50% 100%;
/*百分比的参照物是父元素的宽(width)和高(height)*/
/*父元素是指承载它的元素*/- 第二种：通过像素(px)单位来规定背景图片的尺寸。
background-size: 300px 500px;
/*第一个值是宽（width),第二个值是高（height）*/
/*单位是像素(px)*/实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3学习</title>
<style>
div{
height: 500px;
width: 1000px;
color: white;
}
#div1 {
background: url("a404.jpg") no-repeat;
background-size: 50%;
}
#div2{
background: url("a404.jpg") no-repeat;
background-size: 300px 500px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>生成的网页：
（图片左上角与上面代码是相对应的）
background-origin 属性
background-origin 属性规定网页中背景图片的定位区域。
三个区域：
- content-box：包含在中心的区域。
background-origin: content-box;
百度翻译供参考
- padding-box：中间夹心的区域。
background-origin: padding-box;
百度翻译供参考
- border-box：贴着边框的区域。
background-origin: border-box;
供参考
CSS3多重背景
多重背景：可以为元素块设置多个背景。
多重背景属性的值越在前，则在网页中位置最靠前；
- 多重背景代码：
background-image:url(bg1.png),url(bg2.png);效果图：
- 单个背景代码：
background-image:url(bg1.png);效果图：
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
