1.CSS background属性与background-image属性

html-css024

1.CSS background属性与background-image属性,第1张

在书写css样式时,background属性与background-image经常用来设置背景图片,容易搞混。

background属性包含background-image属性,是在一个声明中设置所有的背景属性。

连background-image在内,background属性包含以下:

background-color     规定要使用的背景颜色。1

background-position     规定背景图像的位置。1

background-size     规定背景图片的尺寸。3

background-repeat     规定如何重复背景图像。1

background-origin        规定背景图片的定位区域。3

background-clip     规定背景的绘制区域。3

background-attachment     规定背景图像是否固定或者随着页面的其余部分滚动。1

background-image     规定要使用的背景图像。1

inherit    规定应该从父元素继承 background 属性的设置。1

通常在写css的时候,一般都直接用background做全局设置,不单独去设置。

用background做全局设置时,要将所有背景属性写在一个声明中

body { background: red }

p { background: url("chess.png") 40% / 10em gray  round fixed border-box}

分拆写法如下

body {

    background-color: red

    background-position: 0% 0%

    background-size: auto

    background-repeat: repeat

    background-clip: border-box

    background-origin: padding-box

    background-attachment: scroll

    background-image: none }

p {

    background-color: gray

    background-position: 40% 50%

    background-size: 10em 10em

    background-repeat: round

    background-clip: border-box

    background-origin: border-box

    background-attachment: fixed

    background-image: url(chess.png) }

  background:no-repeat scroll  0px 0px /  300px 300px   rgba(0, 0, 0, 0)

  background-position与background-size之间 必须用  / 做分割 

  前面是background-position  后面是 background-size 

1、可以同时使用背景色和背景图,具体方法首先用hbuilder新建一个html文件,创建一个div,并给div一个class属性,在上方的style中设置class的样式,这里把div的宽度和高度设置大点,方便观察效果:

2、然后使用background设置属性;background是一个复合属性,有五个参数,第一个是背景颜色,第二个是图片,第三个是图片重复的设置,第四个是背景图像是否固定或者随着页面的其余部分滚动,第五个个背景图像的起始位置:

3、最后打开浏览器,就能看到图片了,图片覆盖不了的部分则是使用背景色填充:

1)背景图片插入:background-image:url(位置及名称) //默认在父级元素内的左上角2)背景平铺方式:background-repeat:no-repeat //不平铺 3)背景位置:background-position:right bottom //横向在右边,纵向在下边,即右下角center center //位于中心center right //中间靠右100px 200px //靠左100 靠上2004)背景尺寸:background-size:cover/contain/100% 100% 等比例缩放(铺满即可)/包含在里面/按盒子大小缩放注意:低版本的IE不支持背景尺寸5)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域,注意:此时的位置是相对于可视区域的  (fixed:这里有一个兼容性性的问题,在IE6中,只有html和body支持这个属性)6)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!解决方法: display:inline//变为行内元素即可