css设置背景

小咪咪 2022-06-06 02:24 289阅读 0赞

**css2设置背景相关属性有如下：**  
background : 简写属性，作用是将背景属性设置在一个声明中。  
background-color : 设置元素的背景颜色。  
background-image : 把图像设置为背景。  
background-repeat : 设置背景图像是否以及如何重复  
background-position : 设置背景图像的起始位置  
background-attachment ：背景图像是否固定或者随着页面的其余部分滚动。

**基本属性**  
**背景色（background-color）**  
background-color属性用纯色来填充背景，用法为background-color: css颜色表示  
eg：

background-color:transparent
    background-color:rgb(0,0,255)
    background-color:#0000ff

**背景图（background-image）**  
background-image属性允许指定一个图片展示在背景中。可以和background-color一起使用，如果图片不重复的话，图片覆盖不到的地方都会被背景色填充。用法：  
background-image: url(image’s url);

**背景平铺（background-repeat）**  
该属性的值在默认情况下为repeat，默认吧图片在水平和垂直方向平铺以铺满整个元素。该属性可以设置为如下：

background-repeat:repeat; 默认，背景图像将在垂直和水平方向重复。
    background-repeat:norepeat; 背景图像将仅显示一次。
    background-repeat:repeat-x; 背景图片将在水平方向重复
    background-repeat:repeat-y; 背景图片将在垂直方向重复
    background-repeat:inherit; 从父元素继承background-repeat属性的设置

**背景定位（background-positon）**  
该属性用来设置背景图像的起始位置。如果背景图像重复，将从这一点开始。表示的时候，先表示x轴（水平位置），再表示y轴（垂直位置）。默认值：0% 0%  
具体定位的值如下：  
x轴：top、center、bottom、x%、xpos  
y轴：left、center、right、y%、ypos

**背景附者（background-attachment）**  
backgroud-attachment属性用来设置背景图像是否固定或者随着也没的其余部分滚动。  
取值：  
scroll:背景图像会随着页面其余部分的滚动而移动。（默认为scroll）  
fixed:当页面的其余部分滚动时，背景图像不会移动。  
inherit:从父元素继承background-attachment属性的设置。

**css背景表示**  
1、将所有的属性写出来：

background-color:transparent;
    background-image:url(image's url);
    background-position: 50% 0;
    background-attachment:scroll;
    background-repeat:repeat-y;

2、合为单独一行

background:transparent url(image's url) 50% 0 scroll repeat-y;

**css3中设置背景**  
**1、多背景**  
css3中，可以对一个元素应用一个或多个图片作为背景。代码和css2中的一样，只需要用逗号类区别各个图片。第一个声明的图片定位在元素顶部，其它的图片按序在其下排列。

**2、新属性**  
**背景修剪（background-clip）**  
语法：background-clip: border-box|padding-box|content-box  
border-box:背景被裁剪到边框盒。  
padding-box:背景被裁剪到内边距框。  
content-box:背景被裁剪到内容框。

**背景原点（background-origin）**  
语法：background-origin: border-box|padding-box|content-box;  
border-box:背景图像相对于内边距框来定位。  
padding-box:背景图像相对于内边框盒来定位。  
content-box:背景图像相对于内容框来定位。

**背景尺寸（background-size）**  
background-size属性用来规定背景图像的尺寸  
语法：background-size:length|percentage|cover|contain;  
值：  
length:设置背景图像的高度和宽度。第一个值设置宽度，第二个设置高度。如果只设置一个值，则第二个值会被设置为“auto”  
percentage:以父元素的百分比来设置背景图像的宽度和高度。  
cover:把背景图像扩展到足够大，让背景图像完全覆盖背景区域。  
contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。