Фон-размер в сокращенном фон-фон (CSS3)

Я пытаюсь смешивать свойства background-image и background-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, объясняющем это.

Но это не работает! Также неясно, как сделать сокращенное свойство background, когда background-size и background-position имеют два разных значения для background-position-x и background-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;
}

Ответы

Ответ 1

  • Ваш jsfiddle использует background-image вместо background
  • Это, похоже, случай "не поддерживается этим браузером".

Эта работа в опере: http://jsfiddle.net/ZNsbU/5/
Но не работает в ff5 или ie8. (yy для устаревшего браузера: 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, опера, но не ie8.

Ответ 2

Вы можете сделать как

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

Ответ 3

Просто примечание для справки: я пытался сделать стенографию так:

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

но браузеры iPhone Safari не отображали изображение правильно с помощью элемента фиксированной позиции. Я не проверял с нефиксированным, потому что я ленив. Я должен был переключить css на то, что ниже, стараясь не использовать свойство фона после. Если вы делаете их наоборот, фон возвращает размер фона к исходному размеру изображения. Поэтому, как правило, я бы избегал использования сокращения для установки размера фона.

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

Ответ 4

попробуйте вот так

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;
}