Forever

Do one thing at a time, and do well.

css之背景属性

css之背景属性

<!–背景颜色:–>
<!–background-color: 合法的颜色值;–>
<!–1.合法的颜色值 :颜色名,16进制颜色值,rgb颜色值,rgba颜色值–>
<!–2.如果没有设置背景颜色,那么背景就是透明。默认值:transparent–>

<!–背景图片:–>
<!–background-image: url(图片路径)–>
<!–1.图片路径 :相对路径 绝对路径–>
<!–2.默认值:none 表示没有背景图片–>
<!–3.背景颜色和背景图片可以同时设置–>

<!–背景重复:–>
<!–background-repeat: 值;–>
<!–1.repeat 默认值 表示重复–>
<!–2.no-repeat 表示不重复–>
<!–3.repeat-x 表示水平方向重复–>
<!–3.repeat-y 表示垂直方向重复–>

<!–背景尺寸–>
<!–background-size:宽度 高度 ;–>
<!–1.尺寸单位:背景图片的宽度和高度就是一个固定的值–>
<!–2.% 以父元素的百分比来设置背景图片的宽度和高度–>
<!–3. contain 把背景图片扩展至最大尺寸,使宽度或高度完全适应内容区域.保持原来的宽高比例–>
<!–4. cover 把背景图片扩展至足够大,使背景图片完全覆盖背景区域。背景图片的某些部分无法显示在元素区域中。保持原来的宽高比例–>
<!–5.当只设置一个值时,第2个值是auto。图片不会变形,会保持原来的宽高比例–>

<!–背景定位:–>
<!–background-position:X(水平位置) Y(垂直位置);–>
<!–当只设置一个值时,另一个值就是center(表示居中)–>
<!–1.方向定位:top上 bottom下 right右 left左 center中–>
<!–2.尺寸单位定位:参考位置是背景图片左上角与元素左上角水平垂直距离.设置一个值时,这个值一定是水平位置–>
<!–3.%定位 : 0% 0% 图片在左上角,50% 50% 图片水平垂直居中,100% 100% 图片在右下角,–>
<!–4.背景定位可以使用负值,方向与正值相反–>

<!–背景固定–>background-attachment指的是背景是否滚动的意思
<!–设置背景图片是否随页面滚动–>
<!–1.scroll 默认值,背景图片会随页面滚动而移动–>background-attachment: scroll;
<!–2.fixed 背景图片不会随页面滚动而移动–>background-attachment: fixed;

<!–背景简写–>
<!–background:颜色值 背景图片 背景重复 背景定位/背景尺寸 背景固定;–>
<!–1.可以在一个属性中设置所有背景属性,用空格隔开
2.如果某个值不写,也不会出问题
3.使用背景简写,输入的代码最少,浏览器对背景简写支持度更高–>

例子:background:#00ff00 url(51zxw.png) no-repeat 20px 100px/300px 90px fixed;

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注