CSS背景相关知识
2018-09-05 11:45
821 查看
background背景
背景共分为以下8个属性
background-color:背景颜色
background-image:背景图片
background-repeat:背景图片重复
background-position:背景图片位置
background-size:背景图片尺寸
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;(#后面有三个字符说明每两个是相同的,也就是#f00相当于#ff0000)
rgb颜色,这里如果是rgba,a表示透明程度,0表示全透明,1表示完全不透明,如:background-color:rgba(255,0,0,0.5);
transparent,透明,如:background-color:transparent;
background-image:
url图片地址,可以多个图片,如:background-image:url(img/a.jpg),url(img/b.jpg)
none,不显示背景图像
background-image与background-color联合使用,保证在出现以下几种情况下,有背景色可以填充
(1)图片出不来(可能路径错,图片不存在)
(2)图片被误删除
(3)图片在不平铺的情况下覆盖不了整个盒子
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区域
contect-box:背景只覆盖到content区域
background-origin:
border-box:背景图像的起始位置在边框处,如:background-origin:border-box;
padding-box:背景图像的起始位置从padding处开始
content-box:背景图像的起始位置从content处开始
该属性从ie9开始支持
background简写:(中间用空格隔开)
background:(background-color)(background-image)(background-repeat)(background-position)(background-size)
例:
.box {
height: 400px;
background-color: #e8e8e8;
background-image: url('www.baidu.com/XXXX.jpg');可以加单引号也可以不加
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
}
可以简写为:
.box {
height: 400px;
background: #e8e8e8 url('www.baidu.com/XXXX.jpg') no-repeat center center/100px 100px;
}
背景共分为以下8个属性
background-color:背景颜色
background-image:背景图片
background-repeat:背景图片重复
background-position:背景图片位置
background-size:背景图片尺寸
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;(#后面有三个字符说明每两个是相同的,也就是#f00相当于#ff0000)
rgb颜色,这里如果是rgba,a表示透明程度,0表示全透明,1表示完全不透明,如:background-color:rgba(255,0,0,0.5);
transparent,透明,如:background-color:transparent;
background-image:
url图片地址,可以多个图片,如:background-image:url(img/a.jpg),url(img/b.jpg)
none,不显示背景图像
background-image与background-color联合使用,保证在出现以下几种情况下,有背景色可以填充
(1)图片出不来(可能路径错,图片不存在)
(2)图片被误删除
(3)图片在不平铺的情况下覆盖不了整个盒子
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区域
contect-box:背景只覆盖到content区域
background-origin:
border-box:背景图像的起始位置在边框处,如:background-origin:border-box;
padding-box:背景图像的起始位置从padding处开始
content-box:背景图像的起始位置从content处开始
该属性从ie9开始支持
background简写:(中间用空格隔开)
background:(background-color)(background-image)(background-repeat)(background-position)(background-size)
例:
.box {
height: 400px;
background-color: #e8e8e8;
background-image: url('www.baidu.com/XXXX.jpg');可以加单引号也可以不加
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
}
可以简写为:
.box {
height: 400px;
background: #e8e8e8 url('www.baidu.com/XXXX.jpg') no-repeat center center/100px 100px;
}
相关文章推荐
- css布局相关知识
- 介绍有关学习C++ STL的预备知识和STL的相关背景知识,适合想对STL做大致了解的初学者
- CSS边框和背景相关属性
- CSS总结-----常用背景相关
- HTML入门学习笔记--CSS 3D转换模块和背景相关(12)
- css相关知识积累
- Hibernate实战数据持久化之一Hibernate产生背景和相关的基础知识
- WEB前端入门-CSS相关知识概述
- CSS动画相关知识详解
- css滤镜相关知识 存货以备不时之需
- 从0开始学习ASP.NET(2.0为例)系列——06HTML、CSS、JavaScript相关知识介绍
- CSS-相关练习1-表格实现奇数行和偶数行自行判断设置不同的背景颜色
- css基础浮动相关知识
- .NET的开创背景和相关知识初探
- CSS 相关知识总结
- CSS、JavaScript、html相关知识复习(不定期更新,注定逻辑混乱毫无章法,不适合做入门资料纯当业余吐槽)
- css 背景图片相关属性
- 在CSS中对背景图片进行设置相关属性
- 06-CSS行高相关知识