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

html-css013

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 

这是一个层叠样式表文件，主要是为网页增加样式，例如颜色边框背景图片以及定位等...可以用HTML网页文件来调用；html文件连接代码为<style

href="css1.css"

rel="stylesheet"

type="text/css">