css background的多种属性详解
2017-10-13 15:43
555 查看
css的background属性由以下属性组成:
background-color:背景色 background-image:背景图片 background-size:背景图片尺寸 background-repeat:背景图片重复(repeat,repeat-x,repeat-y,no-repeat) background-position:背景图片位置 background-attachment:背景图片是否固定不动 background-clip:背景覆盖区 background-origin:背景图片覆盖区
其中比较常用的是:
background-color:背景色background-image:背景图片
background-repeat:背景图片重复
background-position:背景图片位置
background-color
颜色名称,如:background-color:red;
十六进制背景色,如:
background-color:#ff0000;/
background-color:#f00;
rgb颜色,这里如果是rgba,a表示透明程度,为0全透明,为1全显示,如:
background-color:rgb(255,0,0);/
background-color:rgba(0,0,255,0.8);
transparent,透明,如:
background-color:transparent;
background-image
url图片地址,可以多个图片,如:background-image: url(img/a.jpg),url(img/b.jpg);
none,不显示背景图像
background-repeat
repeat:水平和垂直方向都重复图像,如:background-repeat: repeat;
repeat-x:水平方向重复图像
repeat-y:垂直方向重复图像
no-repeat:图像不重复
background-position
位置名字组合定位,只写一个默认另一个为居中,如:background-position: right bottom;/
background-position: center;
百分比位置,如:
background-position: 20% 20%;
具体像素位置, 如:
background-position: 20px 20px;
background-attachment
scroll:背景图像相对于页面不动,会随着网页的滚动而移动,默认fixed:背景图像相对于浏览器窗口不动,内容滚动的时候背景图像不动,如:
background-attachment: fixed;
background-size
像素大小,只写一个默认另一个为auto,如:background-size: 200px 100px;
百分比大小,如:
background-size: 60% 60%;
cover:背景图像覆盖当前元素的所有背景区域,如:
background-size: cover;
contain:图像显示最大且刚好完全显示,一般不能覆盖全部背景区
background-clip
border-box:背景覆盖到边框区域,如:background-clip: border-box;
padding-box:背景覆盖到padding区域
content-box:背景只覆盖到content部分
background-origin
border-box:背景图像的起始位置在边框处,如:background-origin: border-box;
padding-box:背景图像的起始位置从padding处开始
content-box:背景图像的起始位置从content处开始
当所有的这些属性都放到一行显示:
背景颜色#8a9,背景图像3.jpg,靠上居中,图片宽200px,高自适应,不重复,背景覆盖到content。html主要代码:
<div> <p>1、css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧</p> <p>2、css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧</p> </div>
css主要代码:
div{ width:300px; height:400px; padding: 20px; border: 6px dashed #f9f; background: #8a9 url(img/3.jpg) top /200px fixed no-repeat content-box; }
不过,这里由于background-origin和background-clip的属性值是一样的,所以在这里写两个参数的话只有后面一个起作用,且背景色和背景图像都按后面一个参数去显示。
结果如下:
未开始滚动网页:
开始滚动网页:
相关文章推荐
- CSS background属性之背景设置详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- background属性用法详解和CSS-Sprite技术
- CSS背景图像位置属性background-position百分比详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景图像位置属性background-position百分比详解
- CSS背景图像位置属性background-position百分比详解
- css中position与background-position属性详解(附小实例)
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性background详解
- CSS背景属性Background详解
- CSS background属性详解
- CSS中background属性详解
- background-position 一个css中的常用属性
- DW中CSS属性详解
- CSS之margin属性完美详解