• CSS background汇总


    本文更新版本 ,请跳转

    所有背景属性都不能继承。

    1.    background-color

    所有元素都能设置背景颜色。

    background-color的默认值是transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。

    2.    background-image

    所有元素都能设置背景图像;

    背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。

    3.    background-repeat

    repeat(默认)/no-repeat/repeat-x/ repeat-y

    4.    background-attachment

    scroll(默认)/fixed

    5.    background-position

    像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%。

    百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%。

    关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。

    注意:background-position可以为负值

    在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。

    6.    background-size

    设置背景图像的尺寸;默认值为auto。

    像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。

    百分比法:以父元素的宽度和高度以基准来计算。

    关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。

    关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。

    7.    background-origin

    定义背景图像的初始位置

    border-box,边框左上角。

    padding-box,padding区域左上角;默认值。

    content-box,内容区左上角。

    8.    background-clip

    The CSS3 background-clip property specifies the painting area of the background.

    The property takes three different values:

    • border-box - (default) the background is painted to the outside edge of the border
    • padding-box - the background is painted to the outside edge of the padding
    • content-box - the background is painted within the content box

     (英文的解释得比较清楚)

    (英文都是从W3Schools Online搬运)

    关于background-origin和background-clip,它们是相互独立的,互不干扰。

    关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:

     background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。

    (个人见解,仅供参考)

    Full Size Background Image

    If we want to have a background image on a website that covers the entire browser window at all times.

    The requirements are as follows:

    • Fill the entire page with the image (no white space)
    • Scale image as needed
    • Center image on page
    • Do not cause scrollbars

    The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

    1 html {
    2     background: url(img_flower.jpg) no-repeat center fixed; 
    3     background-size: cover;
    4 }

    小tips:

    利用背景图像的水平平铺,实现波浪式的边框效果。

    (目前只有想法,还没找到符合需求的图像。)

  • 相关阅读:
    hdu 4963(中途相遇法)
    UVALive 6869(后缀数组)
    AC自动机小结
    poj 2409+2154+2888(Burnside定理)
    HUST 1569(Burnside定理+容斥+数位dp+矩阵快速幂)
    bunoj 34990(hash)
    CSU 1506(最小费用最大流)
    CF 514C(hash)
    lightoj 1297(三分)
    lightoj 1179(线段树)
  • 原文地址:https://www.cnblogs.com/cc156676/p/5695858.html
Copyright © 2020-2023  润新知