Объявление селектора фона в CSS - PullRequest
Новая
       25

Объявление селектора фона в CSS

1 голос
/ 09 апреля 2010

В CSS объявление для селектора имеет вид: 

background-attachment: scroll; 
background-color: transparent; 
background-image: url(/images/ucc/green/btn-part2.gif); 
background-repeat: no-repeat; 
background-position: right top;

Я хочу оптимизировать код и изменить его на: 

background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;

У меня вопрос: это правильный путь и работает ли он в IE7 / 8, Firefox, Safari?

Ответы [ 3 ]

0 голосов
/ 09 апреля 2010

Да, это работает. Посмотрите на пункт 6 здесь - http://www.domedia.org/oveklykken/css-shorthands.php

0 голосов
/ 09 апреля 2010

http://www.w3schools.com/css/css_background.asp

При использовании сокращенного свойства порядок значений свойств: 

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

background
{
    background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}
0 голосов
/ 09 апреля 2010

Да, это правильный путь, и он работает во всех основных браузерах. Вы можете прочитать больше о CSS background свойстве, которое можно использовать для одновременной установки всех background-* свойств.

Обновление: Да, будет работать следующее правило: 

background
{
    background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}

За исключением того, что браузер попытается применить это правило к элементу <background> в DOM. А поскольку в HTML такого элемента нет, правило никогда не будет применяться ни к чему. :-) Так что вам нужно изменить селектор правил, чтобы выбрать элемент контейнера, к которому вы хотите применить свойство background: 

div#myDivIWantToSetBackgroundTo
{
    background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}

Кстати, вы можете играть с различными значениями свойства background на сайте W3School.

...