background用法
当我们遇到这样的题时：能实现背景平铺效果，对应的CSS为div{backgroud-image:url(images/bg.gif);}这样的写法是为正确？我们都会一头雾水，不知是否对，其实它是正确的
因为background-image属性后面只能添加图片路径的属性值，因为他不是复合式写法，不能同时添加平铺属性值。当只添加背景图时，背景图默认平铺，所以今天给大家介绍一下background这个属性，background这个属性呢包含了图片、颜色、定位、大小等
background参数
参数1背景图片的路径
参数2表示的是是否平铺
repeat允许背景图片平铺是默认值
no-repeat不允许平铺
repeat-x沿x轴平铺
repeat-y沿y轴平铺
参数3表示的是图片 的位置
参数3有两个值第一个值表示水平位置的 第 二个值表示垂直位置
参数3的值可以给多种数据
方位值 水平 left center right
垂直 top center bottom
具体的像素值
水平方向代表距离 盒子左边是多少像素
垂直方向代表距离盒子 上面多少像素
给百分比给百分比的意思是图片对应的百分比数与盒子对应的百分比数重合
参数4 注意点:要加参数4 就必须在参数3后面加一个 /
参数4表示的是背景图片的大小
给具体的像素值表示的是背景图片的大小
给百分比指的是相对于盒子的百分比100% 就是铺满盒子
给特殊单词
cover会使得图片有部分没有显示表示的是图片必须覆盖盒子缩放后 图片一定大于或者等于盒子
contain背 景图片图片同比方法图片不会变形 表示盒 子必须包含这个背景图片缩放后 图片一定小于或者等于盒子
参数5 背景颜色
如果有多张图片作为背景图片那么最先写的 优先级要高于后写的
background是一个复合 厲性(继承属性)就是说它是 由多个子属性组成的
background-color
background- image
background-repeat
background-repeat-x
background-repeat-y
background-position
background-size
/* .box:hover{
/*如果使用background修改那么就需要把原本的样式复制下来 */
/*background : url(img/03.jpg) no-repeat 0 0 / 100px 100px yellow;
background-image: url(img/04.jpg);
} */
1 .box{ 2 width: 500px; 3 height: 500px; 4 margin: auto; 5 background: url(img/01.jpg) no-repeat left top; 6 background: url(img/yinhe-005.jpg) no-repeat right top; 7 background: url(img/03.jpg) no-repeat left bottom; 8 background: url(img/04.jpg) no-repeat right bottom; 9 background: url(img/a.jpg) no-repeat 130px 120px / 50px 50px; 10 } 11 </style> 12 </head> 13 <body> 14 <div class= "box" ></div> 15 </body>
