background

background-image属性是什么？

background-image属性为元素设置背景图像。

background-image属性用于为元素设置一个或多个背景图像，多个背景图像使用逗号来分隔。各个背景图像以堆叠的方式逐张放置在元素的上面。

在各个背景图像层中，第一个图像层最接近屏幕前的观察者。元素的边框会被绘制在背景图像的上面，而元素的background-color（背景颜色）则会被绘制在所有背景图像的下面。

background-image属性值模式

background-image的属性值模式就是用来给它加“特技”的。它的值模式有：

1、url()模式；

2、linear-gradient()模式；

3、repeating-linear-gradient()模式；

4、radial-gradient()模式；

5、repeating-radial-gradient()模式；

6、none特殊值。

除了url()模式，其他模式在其他的文章中都有过详细的介绍，如果不知道，出门左转。下面我来讲讲url()模式。和image标签中的src写法类似，url()中可以写绝对路径，也可以写相对路径，甚至也可以写其他域名下的图片资源。另外url()中的路径加不加引号也无所谓。

background-image属性是什么？

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

详细说明：

background-image 属性会在元素的背景中设置一个图像。

根据background-repeat属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。

初始背景图像（原图像）根据background-position属性的值放置。

CSS background-image的定义和用法

background-color 属性设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。 默认值：transparent继承性：no版本：CSS1JavaScript 语法：object.style.backgroundColor=#00FF00　　body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}

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

在书写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 

background-image:url()用法

background-image:url()用法如下：

background-image为元素设置背景图像，占据了元素的全部尺寸。

1、示例：

.div{。

background-image:url（xxx.jpg）；}。

background-image是指在元素背景中设置一个图像。

url是指图像的地址位置。

xxx.jpg是指图片名称以及前面需要添加图片路径。

2、background-image默认以左上角垂直的水平方向重复。

url可以使用绝对路径也可以使用相对路径。

3、默认值：none；不显示默认图像。

继承;no。

css3中属性值可以是多值模式，多个用英文逗号分隔。

示例:

background-image。

url(aaa.jpg)。

url(bbb.jpg)。

4、background-position属性设置图像的起始位置。

background-repeat定义图像的平铺模式。

background-attachment定义图像固定或者是页面滚动。

5、javascript使用：object.style.backgroundImage="url(xxx.jpg)" 。