• 深入学习css之background属性


    css中允许应用纯色作为背景,也允许使用图片作为背景。

    background一共有8个对应的属性:

    1、background-color:颜色值

    用于设定背景的颜色

    3种定义颜色的形式,

    1 颜色关键字表示法,可直接用英文单词来定义,比如redbluegreen等。

    2 16进制表示法,用#000000#ffffff区间内的16进制数来表示。

    3 三原色表示法,rgbrgb,其中r,g,b分别代表红色,绿色,蓝色,取值范围为0255.

    默认值:transparent

    注意:

    1.当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。

    2.如果设置了 <' background-image '>,同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。

    3.对应的脚本特性为backgroundColor

    2、background-imageurl(“图片路径);

    用于设定对象的背景图片

    默认值:none

    注意:

    如果定义了多组背景图,且背景图之间有重叠,写在前面的将会盖在写在后面的图像之上。

    对应的脚本特性为backgroundImage

    3background-repeat

    设置或检索对象的背景图像如何铺排填充。

    取值:

    repeat-x:背景图像在横向上平铺

    repeat-y:背景图像在纵向上平铺

    repeat:背景图像在横向和纵向平铺

    no-repeat:背景图像不平铺

    round背景图像自动缩放直到适应且填充满整个容器。(CSS3)

    space背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)

    ie览器还不支持以上两个新属性。

    默认值:repeat

    注意:

    允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。

    如果只提供1个参数,则用于横向和纵向。特殊值repeat-xrepeat-y除外,因为repeat-x相当于repeat no-repeatrepeat-y相当于no-repeat repeat,即其实repeat-xrepeat-y等价于提供了2个参数值 

    对应的脚本特性为backgroundRepeat

    4background-position

    用于设置或检索对象的背景图像位置。

    取值:

    <percentage>用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小

    <length>用长度值指定背景图像填充的位置。可以为负值。

    center:背景图像横向和纵向居中。

    left:背景图像在横向上填充从左边开始。

    right:背景图像在横向上填充从右边开始。

    top:背景图像在纵向上填充从顶部开始。

    bottom:背景图像在纵向上填充从底部开始

    默认值:0% 0%,效果等同于left top

    注意:

    该属性提供2个参数值CSS3中已允许提供34个值)

    如果提供三或四个,每个<percentage><length>偏移前都必须跟着一个边界关键字(即left | right | top | bottom,不包括center),偏移量相对关键字位置进行偏移。

    示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px 

    缩写方式:

    background:url(test1.jpg) no-repeat right 20px bottom 20px;

    你也可以设置3个参数值: 

    拆分方式:

    background:url(test1.jpg) no-repeat left bottom 10px;

    要注意的是:设置3个或4个值,偏移量前必须有关键字。也就是说,形如:"10px bottom 20px" ,这样的参数设置是错误的,因为10px前面没有关键字。

    如果提供两个,第一个用于横坐标,第二个用于纵坐标。

    如果只提供一个,该值将用于横坐标;纵坐标将默认为50%(即center)。

    对应的脚本特性为backgroundPosition

    5、background-attachment

    设置或检索背景图像是随对象内容滚动还是固定的。

    取值:

    fixed:背景图像相对于窗体固定。

    scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

    local背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)

    默认值:scroll

    还有三个是css3中新加入的

    6background-size

    检索或设置对象的背景图像的尺寸大小。

    取值:

    <length>用长度值指定背景图像大小。不允许负值。

    <percentage>用百分比指定背景图像大小。不允许负值。

    auto:背景图像的真实大小。

    cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

    contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    默认值auto

    注意:

    • 该属性提供2个参数值(特性值covercontain除外)
    • 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
    • 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
    • 对应的脚本特性为backgroundSize
    1. 不支持写入 <' background '> 缩写方式。
    2. iOS6.1及更早cover值在body上有bug;同时background-size: cover; background-attachment: fixed;配合时也有bug

    7、background-clip指定对象的背景图像向外裁剪的区域。 

    取值:

    padding-box:padding区域(不含padding)开始向外裁剪背景。

    border-box:border区域(不含border)开始向外裁剪背景。

    content-box:content区域开始向外裁剪背景。

    text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果

    默认值:border-box

    注意:

    1. text属性值,目前为webkit only

       2.对应的脚本特性为backgroundClip

     8、background-origin

    取值:

    padding-box:padding区域(含padding)开始显示背景图像。

    border-box:border区域(含border)开始显示背景图像。

    content-box:content区域开始显示背景图像。

    默认值padding-box

  • 相关阅读:
    盒模型--边界
    盒模型--填充
    盒模型--宽度和高度
    盒模型--边框(二)
    盒模型--边框(一)
    元素分类--内联块状元素(特点:同行, 可设置宽高和边距)
    元素分类--内联元素(特点:同行, 宽高边距不可改)
    元素分类--块级元素(特点:独占一行, 宽高边距可改)
    Java并发注解Annotation
    游戏服务器端开发的基本大纲
  • 原文地址:https://www.cnblogs.com/thinkguo/p/8074577.html
Copyright © 2020-2023  润新知