zoukankan      html  css  js  c++  java
  • css3背景、边框、和补丁相关属性 (二)

    背景

    background : background-color || background-image || background-repeat || background-attachment || background-position 默认值为:transparent none repeat scroll 0% 0%。

    设置对象的背景样式。如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如:

    设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性,则其设置将被 background-image 的默认值 none 覆盖。背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承,但如果未指定,其父对象的背景颜色和背景图将在对象下面显示。对应的脚本特性为 background 。

    相关属性:

    background-attachment : scroll | fixed 语法取值

    scroll  :  默认值。背景图像是随对象内容滚动

    fixed   :  背景图像固定

    background-color : transparent | color 语法取值 transparent  :  默认值。背景色透明

    color        :  指定颜色。请参阅 颜色单位 和 附录:颜色表  使用说明 设置或检索对象的背景颜色。当背景颜色与背景图像( background-image )都被设定了时,背景图片将覆盖于背景颜色之上。

    background-image : none | url ( url ) 语法取值 none         :  默认值。无背景图 url ( url )  :  使用绝对或相对 url 地址指定背景图像 使用说明 设置或检索对象的背景图像。当背景图像与背景颜色( background-color )都被设定了时,背景图片将覆盖于背景颜色之上。

    background-position : length || length background-position : position || position 语法取值 length    :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  :  top | center | bottom | left | center | right 使用说明 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。对应的脚本特性为 backgroundPosition 。

    background-position-x : length | left | center | right 语法取值 length  :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  left    :  居左 center  :  居中 right   :  居右 使用说明 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 backgroundPositionX 。

    background-position-y : length | top | center | bottom 语法取值 length  :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  top     :  居顶 center  :  居中 bottom  :  居底  使用说明 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 backgroundPositionY 。

    background-repeat : repeat | no-repeat | repeat-x | repeat-y 语法取值 repeat     :  默认值。背景图像在纵向和横向上平铺 no-repeat  :  背景图像不平铺 repeat-x   :  背景图像仅在横向上平铺 repeat-y   :  背景图像仅在纵向上平铺 使用说明 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。

    layer-background-color : transparent | color 语法取值 transparent  :  默认值。背景色透明。 color        :  指定颜色。请参阅 颜色单位 和 附录:颜色表。 使用说明 设置或检索对象整个区域的背景颜色。 CSS3新增: background-origin : border | padding | content 相关属性: background-clip | background-size 取值:border: 从border区域开始显示背景。 padding: 从padding区域开始显示背景。 content: 从content区域开始显示背景。

    background-clip : border-box | padding-box | content-box | no-clip 相关属性: background-origin | background-size 取值:border-box: 从border区域向外裁剪背景。 padding-box: 从padding区域向外裁剪背景。 content-box: 从content区域向外裁剪背景。 no-clip: 从border区域向外裁剪背景。

    background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain

    相关属性: background-clip | background-origin

    取值:

    <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

    <percentage>: 取值为0%到100%之间的值。不可为负值。 说明:设置背景图片的大小。

    指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

    Multiple backgrounds

    语法:background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

    相关属性: background-image | background-origin | background-clip | background-repeat | background-size | background-position

    取值:<background-image>: 指定或检索对象的背景图像。

    <background-origin>: 指定背景的显示区域。参见background-origin

    <background-clip>: 指定背景的裁剪区域。参见background-clip

    <background-repeat>: 设置或检索对象的背景图像是否及如何重复铺排。

    <background-size>: 指定背景图片的大小。参见background-size

    <background-position>: 设置或检索对象的背景图像位置。 说明:多重背景图象,可以把不同背景图象只放到一个块元素里。 多个图片url之间使用逗号隔开即可;如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。 CSS3中在容器的多层背景,各子属性与逗号来分隔值,如果指定的值,如下:

    background-image: w1, w2, w3,…, wM background-repeat: x1, x2, x3,…, xR background-size: y1, y2, y3,…, yS background-position: s1, s2, s3,…, sP 当背景层的数值是N = max(M,R, S, P) 每个属性可以假如它的值为n,通过重复指定的值如下所示:

    background-image: w1,…wM, w1,…wM, w1,… /* N values */ background-repeat: x1,…xR, x1,…xR, x1,… /* N values */ background-size: y1,…yS, y1,…yS, y1,… /* N values */ background-position: s1,…rP, s1,…rP, s1,… /* N values */

    范例书写:

    background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png); background-position: left top, -320px bottom, -640px top; background-repeat: no-repeat, no-repeat, repeat-y;

    也可以简写:

    background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;

  • 相关阅读:
    POJ 2923 Relocation (状态压缩,01背包)
    HDU 2126 Buy the souvenirs (01背包,输出方案数)
    hdu 2639 Bone Collector II (01背包,求第k优解)
    UVA 562 Dividing coins (01背包)
    POJ 3437 Tree Grafting
    Light OJ 1095 Arrange the Numbers(容斥)
    BZOJ 1560 火星藏宝图(DP)
    POJ 3675 Telescope
    POJ 2986 A Triangle and a Circle
    BZOJ 1040 骑士
  • 原文地址:https://www.cnblogs.com/yhq361/p/4212280.html
Copyright © 2011-2022 走看看