平武建站

CSS背景相关知识

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;
}


文章名称：CSS背景相关知识
文章起源：http://pwwzsj.com/article/igcgso.html

其他资讯