CSS 的背景
1、背景颜色
属性 background-color
取值:合法的颜色值
注意:背景颜色是从border位置处开始绘制(相当于在边框、内边距和内容区域上充满)
2、背景图像 background-image
取值:url(图片路径)
3、背景图像平铺 background-repeat
取值 | 说明 |
---|---|
repeat | 默认值,横向和纵向都平铺 |
no-repeat | 不平铺 |
repeat -x | 横向平铺 |
repeat-y | 纵向平铺 |
4、背景图像尺寸 background-size
取值:width,height 取值以px 为单位,或者以百分比为尺寸
5、背景图像定位 background-position
取值 | 说明 |
---|---|
x y (以px为单位的数值) | x:水平偏移位置,y:垂直偏移位置(正负控制偏移方向) |
x y(百分比) | 0% 0%(左上角),100% 100%(右下角),50% 50% (居中) |
x y(关键字) | x:left / center / right;y:top / center / bottom |
6、背景属性 background
取值:color url() repeat position;
例如:background:url(a.jpg) no-repeat 35px center
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>df
#d1{
width: 400px;
height: 400px;
border: 2px solid #000000;
box-sizing: border-box;
background-image:url("https://avatar.csdnimg.cn/7/8/5/1_weixin_43883022.jpg");
background-repeat:no-repeat; /* 不平铺 */
background-size:50% 50%; /* 图片大小为图框的 1/4 */
background-position:100px 100px
}
</style>
</head>
<body>
<div id="d1"></div>
</body>