web-dev-qa-db-ja.com

background：none vs background：transparent違いは何ですか？

difference betweenこれらの2つのCSSプロパティがあります：

background: none;
background: transparent;
  1. 両方とも有効ですか？
  2. どちらを使用する必要があり、なぜですか？
cssbackground
106
web-tiki

それらの間に違いはありません。

backgroundが短縮形である半ダースのプロパティのいずれにも値を指定しない場合、デフォルト値に設定されます。 noneおよびtransparentがデフォルトです。

background-imageを明示的にnoneに設定し、background-colorを暗黙的にtransparentに設定します。もう一方は逆です。

100
Quentin

@ Quentin答えに関する追加情報として、そして彼が正しく言うように、background CSSプロパティ自体は、以下の短縮形です：

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

つまり、次のようにすべてのスタイルを1つにグループ化できます。

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

これは次のようになります（この例では）。

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

だから...設定すると：background:none;
すべての背景プロパティがnoneに設定されていると言っています...
あなたはbackground-image: none;および他のすべてがinitial状態にあると言っています（宣言されていないため）。
したがって、background:none;は次のとおりです。

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

さて、色だけを定義する場合（あなたの場合transparent）、あなたは基本的に言っています：

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

繰り返します、@Quentinが正しく言うようにdefaulttransparentとnoneの値はこの場合は同じですので、あなたの例と元の質問で、いいえ、違いはありません。

しかし！.. background:none対background:redの場合、そうです...私が言うように、最初はすべてのプロパティをnone/defaultに設定し、2番目のプロパティはcolorのみを変更し、残りはdefault状態のままです。

だから簡単に：

短い答え：いいえ、違いはありません（あなたの例と元の質問）
長答：はい、大きな違いはありますが、属性に付与されたプロパティに直接依存します。

Upd1：初期値（別名default）

初期値：ロングハンドプロパティの初期値の連結。

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

backgroundの詳細な説明を参照してください here

Upd2：background:none;仕様を明確にしました。

60
gmo

他の答えを補完するには：transparentやnoneなどの値を明示的に指定せずに、すべてのバックグラウンドプロパティを初期値（background-color: transparentおよびbackground-image: noneを含む）にリセットする場合は、次のように記述します。

background: initial;
7
herman