私は自分の問題の解決策をすでに知っていますが、なぜこれが起こっているのだろうか。background が background-size を上書きするのはなぜですか? クロスブラウジングについて書かないでください。
HTML
<div class="icon"></div>
CSS
.icon {
height: 60px;
width: 60px;
background-size: 60px 60px;
background: transparent url("icon.png") no-repeat 0 0;
}
デモ
解決
background-size以下に説明を挿入background
backgroundサイズを設定した後、画像の位置をリセットします。
その理由は、'background' プロパティが、ほとんどの背景プロパティをスタイル シートの同じ場所に設定するための簡略化されたプロパティであるためです。background-size以前に使用しようとした を含めます。
新しい CSS 仕様のリンクを編集: https://www.w3.org/TR/css-backgrounds-3/#background
あなたが使う
background-size: 60px 60px;
background: transparent url("icon.png") no-repeat 0 0;
つまり、次のようになります。
background-size: 60px 60px; /*You try to set bg-size*/
background-color: transparent ;
background-position: 0% 0%;
background-size: auto auto; /* it resets here */
background-repeat: no-repeat no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: url("icon.png");
background-...したがって、別の設定を使用して試すことができます
したがって、次のいずれかを使用します。
background-size: 100% 100%;
background-image: url("http://1.bp.blogspot.com/-T3EviK7nK1s/TzEq90xiJCI/AAAAAAAABCg/OMZsUBxuMf0/s400/smilelaughuy0.png");
background-repeat:no-repeat;
background-position:0 0;
または、回線を交換するだけです。
backgroundbackground-color関連する複数の背景プロパティを 1 つの宣言 ( 、background-image、background-repeat、background-positionなど) に簡単に結合するための CSS の「短縮プロパティ」です。
したがって、省略形で直接指定されていないプロパティをデフォルト値で上書きします（私の知る限り... W3C仕様によれば、後で省略形プロパティで指定できますbackground-sizeが、これをテストしていないため、どのブラウザーかわかりませんこれは現時点でサポートされていますが、あまり良くないと思います)。私が理解しているように、これは、省略形が、指定したものだけでなく、それが表すすべてのプロパティを暗黙的に設定するため、省略形宣言で定義されていないものはすべてデフォルト値に設定されるためです。backgroundbackground-positionbackground
それを修正するには、次のいずれかを行います。
1)プロパティbackground-sizeをプロパティの後に置くbackground
2）プロパティ宣言をより具体的なセレクターに入れますbackground-size。a.icon.icon
3)background短縮形をまったく使用せず、代わりに個々のプロパティを使用して指定します