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;

  • 相关阅读:
    虚函数
    class与struct的区别
    HTTP是什么连接
    长连接与短连接
    多线程的主要优点
    overload、override、overwrite的介绍
    常用的Linux命令
    IO模型——IO多路复用机制
    栈区与堆区的区别
    软链接和硬链接到底有啥区别
  • 原文地址:https://www.cnblogs.com/oneplace/p/6287447.html
Copyright © 2011-2022 走看看