Css background color none important

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Using a */ background: green; /* Using a and */ background: url("test.jpg") repeat-y; /* Using a and */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); /* Global values */ background: inherit; background: initial; background: revert; background: revert-layer; background: unset; 

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

• Each layer may include zero or one occurrences of any of the following values:
  • The value may only be included immediately after , separated with the ‘/’ character, like this: » center/80% «.
  • The value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
  • The value may only be included in the last layer specified.

  Values

  See background-clip and background-origin . Default: border-box and padding-box respectively.

  See background-color . Default: transparent .

  The following three lines of CSS are equivalent:

  background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent; 

  Accessibility concerns

  Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

  Formal definition

  • background-image : none
  • background-position : 0% 0%
  • background-size : auto auto
  • background-repeat : repeat
  • background-origin : padding-box
  • background-clip : border-box
  • background-attachment : scroll
  • background-color : transparent
  • background-position : refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size : relative to the background positioning area
  • background-image : as specified, but with url() values made absolute
  • background-position : as each of the properties of the shorthand:
    • background-position-x : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-position-y : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-color : a color
    • background-image : discrete
    • background-clip : a repeatable list of
    • background-position : a repeatable list of
    • background-size : a repeatable list of
    • background-repeat : discrete
    • background-attachment : discrete

    Formal syntax

    background =
    [ # , ]?

    =
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    ||
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    |
    none

    =
    [ left | center | right | top | bottom | ] |
    [ left | center | right | ] [ top | center | bottom | ] |
    [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]

    =
    [ | auto ] |
    cover |
    contain

    =
    repeat-x |
    repeat-y |
    [ repeat | space | round | no-repeat ]

    =
    scroll |
    fixed |
    local

    =
    border-box |
    padding-box |
    content-box

    =
    |

    =
    |

    =
    url( * ) |
    src( * )

    Examples

    Setting backgrounds with color keywords and images

    HTML

    p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p> 

    CSS

    .warning  background: pink; > .topbanner  background: url("starsolid.gif") #99f repeat-y fixed; > 

    Result

    Specifications

    Browser compatibility

    BCD tables only load in the browser

    See also

    Found a content problem with this page?

    This page was last modified on Jul 18, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    !important

    A ! delimiter followed by the important keyword marks the declaration as important. The !important flag alters the rules selecting declarations inside the cascade. A declaration that is not important is called normal.

    To mark a declaration important, add the important flag ( !important ) after the value in the declaration. While white space is allowed between the delimiter and the keyword, the flag is generally written as !important without any white space.

    selector  property: value; /* normal declaration */ property: value !important; /* important declaration (preferred) */ property: value ! important; /* important declaration (not preferred) */ > 

    The !important comes after the value of the property value pair declaration, preceded by at least one space. The important flag must be the last token in the declaration. In other words, there can be white space and comments between the flag and the declaration’s ending semicolon, but nothing else.

    Impact on the cascade

    When it comes to important declarations, the cascade origin and layer orders are reversed. Without the important flag, declarations in the author’s style sheets override declarations in a user’s style sheet, which override declarations in the user-agent’s default style sheet.

    When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author’s style sheets. Finally, all important declarations take precedence over all animations.

    Note: All important declarations take precedence over all animations. !important is not valid within @keyframes animation declarations.

    Reversing the precedence order for important declarations ensures users with special needs, such as personalized color schemes or large fonts, can override author styles when needed by marking some declarations in their user’s style sheet as important. It also guarantees malicious extensions can’t override important user-agent styles, which might break functionality or negatively impact security.

    Does anything have precedence over important declarations? Yes, transitions. CSS transitions are a way to control the speed at which the property changes from one value to another. While transitioning from one value to another, a property will not match a specific important declaration.

    a  color: red !important; background-color: yellow; transition: all 2s linear; > a:hover  color: blue !important; background-color: orange !important; > 

    In this example, the color and background-color properties will transition to the hovered state over two seconds. Even though default states are normal declarations and hover states are !important declarations, the transition does happen.

    Cascade layers

    Within each of the three origins for style sheets – author, user, and user-agent – normal declarations in unlayered styles override layered style declarations, with the last declared having precedence over the layers declared before it. Important declarations reverse the order of precedence: important declarations in the first layer take precedence over important declarations in the next layer, and so on. Also, all the important declarations have precedence over important declarations made outside any layer.

    Inline styles

    Inline styles are styles defined using the style attributes. They can also be normal or important. Inline normal styles take precedence over all normal declarations, no matter the origin. Inline important styles take precedence over all other important author styles, no matter the layer, but important styles from user’s or user-agent’s style sheets and transitions override them.

    !important and specificity

    While !important is not part of determining specificity, it is related. Important declarations override all other declarations from the same origin and cascade layer.

    #myElement#myElement#myElement .myClass.myClass p:hover  color: blue; > p  color: red !important; > 

    This example displays a case of over-specifying a selector. No matter how high the selector specificity matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red.

    When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity.

    #myElement p  color: green !important; > p  color: purple !important; > 

    In this case, the selector specificity matters. Only if the selectors had the same specificity would source order matter.

    Impact on shorthand properties

    Declaring a shorthand property with !important sets all of sub-properties as important. The two following selector style blocks are equivalent:

    p  background: blue !important; > p  background-image: none !important; background-position: 0 0 !important; background-size: auto auto !important; background-repeat: repeat !important; background-origin: padding-box !important; background-clip: border-box !important; background-attachment: scroll !important; background-color: blue !important; > 

    This example shows one of the several reasons avoiding the important flag is generally recommended.

    Impact on custom properties

    When the !important flag is added to a custom property value declaration, it makes the value assignment important. The !important flag is then stripped from the custom property value. The !important flag is not passed as part of the custom property value to the var() function.

    :root  --myColor: red !important; --myColor: blue; > p  color: var(--myColor); > blockquote  color: var(--myColor); color: purple; > 

    p>This is a paragraphp> blockquote>This is a blockquoteblockquote> 

    In this example, the paragraph will be red, not blue, as the custom property value assignment is important. The blockquote will be purple, because the purple normal declaration comes after the normal red declaration.

    Best practices

    Avoid using !important to override specificity. When intentionally creating important declarations for UI requirements, comment in your CSS code to explain to maintainers why they should not override that feature.

    Even when working to override high-specificity styles not under your control, such as styles in a 3rd party plugin declared with an id selector, you don’t need to use !important . Consider instead importing the 3rd party stylesheet script into a named or anonymous layer as your first cascade layer, instead of using !important . As long as the external styles do not include important declarations, your styles will take precedence over the widget styles, no matter the specificity.

    If you need to override an external stylesheet containing important declarations, create a cascade layer containing the needed overrides, and declare that layer first.

    Accessibility

    Important styles from a user stylesheet take precedence over the author style sheet’s important declarations, meaning adding an !important flag to a site’s styles will not prevent individual users with special requirements, such as large fonts, from being able to override your styles by adding important styles in their own user’s style sheet.

    Browser compatibility

    This feature is supported in all browsers.

    Источник

    Читайте также:  Regular expression java pdf