欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

Css中的背景属性

 

1、背景包括背景颜色、背景图像

背景颜色:使用单一色作为背景

背景图像:以图片做背景、以渐变色做背景

1、背景颜色

属性:background-color:颜色值;

2、背景图片

属性:background-image

取值:url(图像路径);

background-imageurl("images/logo.png");

background-imageurl('images/logo.png');

background-imageurl(images/logo.png);

3、背景重复

属性:background-repeat:

取值:

repeat : 默认值,垂直和水平都平铺

repeat-x : 仅在水平方向平铺

repeat-y : 仅在垂直方向平铺

no-repeat : 不平铺,仅显示一次

4、背景图片尺寸

属性:background-size

取值:value1 value2 : 宽度 高度 或者 value% value2% : 百分比

cover:扩大背景图像,使背景图完全覆盖背景区域,直到碰到最后一个边缘才停止

contain:扩大背景图像,碰到第一个边缘就停止

5、背景图像固定

属性:background-attachment

取值:scroll即默认,滚动定位 fixed即固定定位

6、背景定位

背景图像在区域中的哪个位置进行显示

属性:background-position

取值: x% y%: 水平位置 垂直位置 或者 x y :水平位置 垂直位置

x 为正 , 向右移动

x 为负 , 向左移动

y 为正 , 向下移动

y 为负 , 向上移动

left right top bottom

center : 居中(x,y)

x:可取值为 left , right , center

y :可取值为 top , bottom, center

background-positionleft top;

background-positioncenter;

常用方式:

1、创建一个与要显示图标大小一样的元素

2、为创建好的元素设置背景图像(大背景图)

3、通过background-position,将图片移动到指定的位置处

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r43977.shtml

我要分享到:
上一篇:Css布局知识点
下一篇:Css布局小结

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-10-30 09:27 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。