background:none vs background:transparent what is the difference?

后端 未结 3 1860
情歌与酒
情歌与酒 2020-12-07 11:43

Is there a difference between these two CSS properties:

background: none;
background: transparent;
  1. Are they both val
相关标签:
3条回答
  • 2020-12-07 11:53

    There is no difference between them.

    If you don't specify a value for any of the half-dozen properties that background is a shorthand for, then it is set to its default value. none and transparent are the defaults.

    One explicitly sets the background-image to none and implicitly sets the background-color to transparent. The other is the other way around.

    0 讨论(0)
  • 2020-12-07 11:53

    To complement the other answers: if you want to reset all background properties to their initial value (which includes background-color: transparent and background-image: none) without explicitly specifying any value such as transparent or none, you can do so by writing:

    background: initial;
    
    0 讨论(0)
  • 2020-12-07 12:17

    As aditional information on @Quentin answer, and as he rightly says, background CSS property itself, is a shorthand for:

    background-color
    background-image
    background-repeat
    background-attachment
    background-position
    

    That's mean, you can group all styles in one, like:

    background: red url(../img.jpg) 0 0 no-repeat fixed;
    

    This would be (in this example):

    background-color: red;
    background-image: url(../img.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
    

    So... when you set: background:none;
    you are saying that all the background properties are set to none...
    You are saying that background-image: none; and all the others to the initial state (as they are not being declared).
    So, background:none; is:

    background-color: initial;
    background-image: none;
    background-repeat: initial;
    background-attachment: initial;
    background-position: initial;
    

    Now, when you define only the color (in your case transparent) then you are basically saying:

    background-color: transparent;
    background-image: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-position: initial;
    

    I repeat, as @Quentin rightly says the default transparent and none values in this case are the same, so in your example and for your original question, No, there's no difference between them.

    But!.. if you say background:none Vs background:red then yes... there's a big diference, as I say, the first would set all properties to none/default and the second one, will only change the color and remains the rest in his default state.

    So in brief:

    Short answer: No, there's no difference at all (in your example and orginal question)
    Long answer: Yes, there's a big difference, but depends directly on the properties granted to attribute.


    Upd1: Initial value (aka default)

    Initial value the concatenation of the initial values of its longhand properties:

    background-image: none
    background-position: 0% 0%
    background-size: auto auto
    background-repeat: repeat
    background-origin: padding-box
    background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    background-clip: border-box
    background-color: transparent
    

    See more background descriptions here


    Upd2: Clarify better the background:none; specification.

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题