background:noneとbackground:transparentの違いは何ですか?


119

これらの2つのCSSプロパティに違いはありますか?

background: none;
background: transparent;
  1. どちらも有効ですか?
  2. どちらを使用する必要がありますか?その理由は?

回答:


111

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

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

明示的にbackground-imageto noneを設定し、暗黙的にto を設定background-colortransparentます。もう1つはその逆です。


2
@herman —いいえ、できません。これはと同じbackground-color: transparent; background-image: none;です。ユーザースタイルシートは、これらの値の一方または両方をオーバーライドする場合background-color: transparent; background-image: none;がありますが、明示的に記述された場合とまったく同じようにオーバーライドします。
クエンティン

それで、「指定されていないプロパティに使用される」「初期」プロパティ値は、ユーザーエージェントのスタイルシートでさえもオーバーライドすると言っていますか?参考資料はありますか?
ヘルマン2015年

ユーザーエージェントスタイルシートは、これらのプロパティの初期プロパティ値をtransparentおよびとして定義する仕様を実装しnoneます。
クエンティン

63

@Quentinの回答に関する補足情報として、そして彼が正しく言っているように、 backgroundCSSプロパティ自体は以下の略記です:

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;
すべての背景プロパティがなしに設定され
ていることを言ってます...あなたはそれ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が正しく、この場合のdefault transparentnone値は同じであると正しく言っているので、繰り返しますが、あなたの例と元の質問では、いいえ、それらの間に違いはありません。

しかし!.. background:noneVs と言ったらbackground:red、はい...大きな違いがあります。私が言うように、1つ目はすべてのプロパティをに設定し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記述をここに


Upd2:background:none;仕様の明確化。


回答のためのthx background-image、background repeat ...のデフォルト値は何ですか?彼らはブラウザに依存していますか?私があなたの説明を理解しているなら、background:noneを使うほうがいいので、どの値もデフォルトに設定されていませんか?
web-tiki

投稿したことを試しましたか?すべての値がnoneに設定されていますか?consoleこのデモのjsfiddle.net/dnzy2/6を
DaniP

設定時:背景:なし; すべての背景プロパティがなしに設定されていると言っています... 言い方は間違っていません
DaniP

2
+1、これは受け入れられた回答でなければなりません(正しい場合)。
Pacerier 2014年

7

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

background: initial;

5
IEはをサポートしていませんinitialCan I UseMDN
chharvey
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.