zoukankan      html  css  js  c++  java
  • CSS background 属性详解

    CSS background Property

    语法:

    background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

    Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

    Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

    background-color

    background-color

    Default value: transparent

    The background-color property sets the background color of an element.

    The background of an element is the total size of the element, including padding and border (but not the margin)(包括内边距和边框).

    background-position

    The background-position property sets the starting position of a background image(背景图片的开始位置).

    Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

    background-size

    The background-size property specifies the size of the background images.

    语法:

    background-size: auto|length|cover|contain|initial|inherit; 

    background-repeat

    The background-repeat property sets if/how(背景图片的重复/循环方式) a background image will be repeated.

    By default, a background-image is repeated both vertically and horizontally.

    Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

    background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

    background-origin

    Default value: padding-box

    The background-origin property specifies where the background image is positioned. 

    Note: If the background-attachment property is set to "fixed", this property has no effect.

    background-origin: padding-box|border-box|content-box|initial|inherit;

    background-clip

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

    background-clip: border-box|padding-box|content-box|initial|inherit;

    background-attachment

    The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

    background-attachment: scroll|fixed|local|initial|inherit;

  • 相关阅读:
    关于GCD同步组实现多个异步线程的同步执行中的注意点
    (七)Redis对键key的操作
    (六)Redis有序集合Sorted set操作
    (五)Redis集合Set操作
    (四)Redis哈希表Hash操作
    (三)Redis列表List操作
    (二)Redis字符串String操作
    (一)Redis简介及安装
    Python对文件和文件夹的高级操作模块shutil
    Python文件传输模块ftplib
  • 原文地址:https://www.cnblogs.com/oneplace/p/6287447.html
Copyright © 2011-2022 走看看