短縮形の背景プロパティの背景サイズ(CSS3)


112

ショートハンドのプロパティbackground-imagebackground-sizeプロパティを混在させようとしていbackgroundます。W3Cのドキュメントに 基づいて、スラッシュ()で区切られたプロパティのbackground-size後に来る必要がありbackground-positionます/

W3Cの例:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

以下と同等です。

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

MDNも同じことを言っています。これと、これを説明するCSS3の簡単な背景プロパティに関するこの記事も見つけました。

しかし、これは機能していません!またbackgroundbackground-sizeとのbackground-position2つの異なる値background-position-xbackground-position-yまたはと同じものがある場合に、省略プロパティを作成する方法も明確ではありませんbackground-size。スラッシュ(/)がどのように行われるかは明らかではありませんか?この例は私のChrome 15では機能しません。

私が略記を作ろうとした例はこのCSSコードです:

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

よりクリーンな例

これは機能していますJSFiddle

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

これは機能していませんjsfiddle

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

これも機能していませんjsfiddle

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

3
Safariが背景サイズの省略形をサポートしていないことに注意してください!Safariはそれをサポートしていません!Safariが窒息しないように、背景のサイズを背景とは別にしてください!
ジェフ

回答:


63
  1. あなたのjsfiddleはのbackground-image代わりに使用しますbackground
  2. 「このブラウザではまだサポートされていません」のようです。

これはOperaで動作します:http : //jsfiddle.net/ZNsbU/5/
しかし、FF5やIE8では動作しません。(古いブラウザの場合はそうです:D)

コード:

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

あなたはこのようにすることができます:

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

これはFF5とOperaでは機能しますが、IE8では機能しません。


ブラウザサポートの問題ではないと思いますか?
Kraz、2011年

1
CSS3の正しい仕様は何だろうと思っただけbackgroundです。
Mohsen、2011年

これは、質問や私のコード例とまったく同じように、W3Cが定義したものです。それはまだすべてのブラウザでまだ実装されていません。
Kraz、2011年

Chrome Canaryでは機​​能しません。まだ実装されていないなんて信じられません。
Mohsen、2011年

この部分の回答として選択:「このブラウザではまだサポートされていません」のケースのようです。
Mohsen

14

あなたは

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

これが私に最も役立ちました。背景のサイズの宣言をコンマで分割できることを知りませんでした。
Nathaniel Flick

9

参考までに、次のように省略形を作ろうとしました。

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

しかし、iPhone Safariブラウザーは、固定された位置要素で画像を適切に表示しませんでした。私は怠惰なので、非修正でチェックしませんでした。私はcssを以下のものに切り替える必要がありました。background プロパティのにbackground-sizeを配置するように注意してください。逆にすると、背景はbackground-sizeを画像の元のサイズに戻します。そのため、通常は、背景サイズを設定するために省略形を使用することは避けます。

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

Android 4.1.2のストックブラウザでも同じ
depoulo

1

このようにしてみてください

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

-5

異なるブラウザーをサポートするにはベンダープレフィックスを使用する必要があるため、省略形では使用できません。

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

1
これは正しくありません。私はしませんする必要があり、私はサポート古いブラウザたくない場合は、ベンダー接頭辞を使用する
モフセンを

このベンダープレフィックスは引き続き機能し、一部のブラウザでは最近になって削除された可能性があります。
Moin Zaman、2011年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.