CSS3 新增属性：背景

Posted 2021-08-01 QXXXD

background-image

CSS3 中可以通过 background-image 属性添加背景图片。

语法：

background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url>| <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

取值：

• none：无背景图
• url：使用绝对或相对地址指定背景图像
• linear-gradient：使用线性渐变创建背景图像
• radial-gradient：使用径向(放射性)渐变创建背景图像
• repeating-linear-gradient：使用重复的线性渐变创建背景图像
• repeating-radial-gradient：使用重复的径向(放射性)渐变创建背景图像

示例：

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

background-size

background-size 指定背景图像的大小。

语法：

background-size: length percentage cover contain;

取值：

• length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
• percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。
• cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

示例：重置背景图像

div{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

background-origin

background-origin 属性指定了背景图像的位置区域。

语法：

background-origin: padding-box border-box content-box;

取值：

• padding-box：背景图像填充框的相对位置
• border-box：背景图像边界框的相对位置
• content-box：背景图像的相对位置的内容框

示例：在 content-box 中定位背景图片

div {
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

background-clip

CSS3 中 background-clip 背景剪裁属性是从指定位置开始绘制。

语法：

background-clip: border-box padding-box content-box;

取值：

• border-box：默认值。背景绘制在边框方框内（剪切成边框方框）
• padding-box：背景绘制在衬距方框内（剪切成衬距方框）
• content-box：背景绘制在内容方框内（剪切成内容方框）

示例：

div {
    background-color:yellow;
    background-clip:content-box;
}