臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > CSS > css3基础-背景

css3基础-背景

所属分类: CSS   2019-12-27 16:59:29  编辑:admin  浏览次数 22 次

background-image

<style>

#example1 {

    background-image: url(img_flwr.gif), url(paper.gif);

    background-position: right bottom, left top;

    background-repeat: no-repeat, repeat;

    padding: 15px;

}

</style>

等价于:

<style>

#example1 {

    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

    padding: 15px;

}

</style>

background-size

background-size:水平px/%  垂直px/%

background-position

描述

·           top left

·           top center

·           top right

·           center left

·           center center

·           center right

·           bottom left

·           bottom center

·           bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"

默认值:0% 0%

x% y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%

如果您仅规定了一个值,另一个值将是 50%

xpos ypos

第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%

您可以混合使用 % position 值。

background-Origin(定位区域)

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

content-box, padding-box, border-box区域内可以放置背景图像。

background-clip(绘制区域)

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

取值有content-box, padding-box, border-box

background-repeat

描述

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像将仅显示一次。

inherit

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

 

background-attachment(页面滚动)

描述

scroll

默认值。背景图像会随着页面其余部分的滚动而移动。

fixed

当页面的其余部分滚动时,背景图像不会移动。

inherit

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

多重背景

语法缩写如下:

background[background-color][background-image][background-position][/background-size][background-repeat][background-attachment][background-clip][background-origin],...

 

可以把上面的缩写拆解成以下形式:

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

 

注意:

 *用逗号隔开每组 background 的缩写值;

 *如果有 size 值,需要紧跟 position 并且用 "/" 隔开;

 *如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。

 *background-color 只能设置一个。


Web文章检索

Web文章目录