• CSS学习笔记-background属性


    平常总是使用background的缩写形式,忽视了各属性的细节在此进行总结。
     
    background-attachment
    W3C:属性设置背景图像是否固定或者随着页面的其余部分滚动。
    属性值:
    scroll   默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed    当页面的其余部分滚动时,背景图像不会移动。
    inherit  规定应该从父元素继承 background-attachment 属性的设置。
     
    background-position
    W3C:属性设置背景图像的起始位置。其中第一个值为水平位置,第二个值为垂直位置。
    假设容器宽高为500px,250px,图片宽高均为100px:
    使用px等长度单位定位时,图片的左上角以容器左上角为基准(包括padding)进行偏移。如background-position:50px 100px
    使用百分比定位时,偏移的计算公式为:(容器的宽度-图片的宽度)x value。例如background-position:50% 50%
    使用关键词定位,可选关键词有left、center、right、top、bottom,分别对应的0 50% 100%。
     
    注:
    1.使用的时候background-repeat:no-repeat;
    2.若偏移太大,则超出部分将会隐藏;
    3.使用百分比和长度单位定位时可以使用负值;
    4.若只指定了一个值,那么另一个值为50%(center);
    5.当background-attachment:scroll时,background-position是相对于容器内容及内边距左上角定位的(如上图),而当background-attachment:fixed时,背景定位是根据body的padding-box的左上角定位的,如图(同样是background-position:50px 100px):
    background-repeat
    W3C:属性设置是否及如何重复背景图像。
    属性值:
    repeat     默认。背景图像将在垂直方向和水平方向重复。
    repeat-x   背景图像将在水平方向重复。
    repeat-y   背景图像将在垂直方向重复。
    no-repeat  背景图像将仅显示一次。
    inherit    规定应该从父元素继承 background-repeat 属性的设置。
     
    background-image
    W3C:属性为元素设置背景图像。
    默认值为none,需要设置的时候使用url('URL')。(若使用相对路径,则路径为相对于写此属性的文件)
     
    background-color
    W3C:属性设置元素的背景颜色。
    元素背景的范围:
    background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
    属性值:
    color_name  规定颜色值为颜色名称的背景颜色(比如 red)。
    hex_number  规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
    rgb_number  规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
    transparent 默认。背景颜色为透明。
    inherit     规定应该从父元素继承 background-color 属性的设置。
     
    以下为CSS3新添属性:(IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持。
    background-clip
    W3C:属性规定背景的绘制区域。
    属性值:
    border-box  默认。背景被裁剪到边框盒。
    padding-box 背景被裁剪到内边距框。
    content-box 背景被裁剪到内容框。
     
    background-origin
    W3C:属性相对于什么位置来定位。
    属性值:
    padding-box 默认。背景图像相对于内边距框来定位。
    border-box  背景图像相对于边框盒来定位。
    content-box 背景图像相对于内容框来定位。
     
    注:当background-attachment:fixed时,无效。(本人测试,是相对于body的padding-box定位的)
     
    background-size 
    W3C:属性规定背景图像的尺寸。
    属性值:
    length      设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
    percentage  以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
    cover       把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
    contain     把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
    这里区分以下cover和contain:(background-attachment:scroll)
                        background-size:cover                                             background-size:contain
    很明显,当值为cover时,目的是填充满容器,而当值为contain时,是背景图不溢出容器时能覆盖的最大面积。
    当设置了background-position属性进行偏移时,相当于先进行background-size确定大小,后进行偏移,如图(background-position:50px 100px)
                        background-size:cover                               background-size:contain
    当background-attachment:fixed时,容器变为body。
     
    最后,为了简便,可以使用background简写声明所有的background属性,例如:
    background: transparent url(black-block.jpg) no-repeat scroll 50px 100px border-box padding-box;
    属性顺序:
    background-color | background-image | background-repeat | background-attachment | background-position | background-origin | background-clip
    注:
    1.顺序能够替换,但注意当background-origin和background-clip相同时,先出现的设置为background-origin;
    2.background-size属性,我一加上就报错,不知为何。
     
    总的来说,CSS3这些新增属性赋予了我们更多控制背景的能力。
     
    本文参考http://www.w3school.com.cn/,并结合自己的测试。若有错误,恳请指正!
     
    如果您觉得这文章对您有帮助,请点击【推荐一下】,想跟我一起进步么?那就【关注】我吧!
  • 相关阅读:
    rabbitmq技术的一些感悟(一)
    用python做自己主动化測试--对server端的自己主动化測试(3)-很多其它http client实例
    huffman编码——原理与实现
    MS-SQLSERVER中的MSDTC不可用解决方法
    基础总结篇之中的一个:Activity生命周期
    STL vector使用方法介绍
    Cocos2d-x Render-NewCulling
    C++ Primer笔记9_构造函数_拷贝构造(深拷贝与浅拷贝)
    shell编程基础
    软考复习之路—组成原理
  • 原文地址:https://www.cnblogs.com/lizijie/p/4044189.html
Copyright © 2020-2023  润新知