css3 градиенты и прозрачные фоновые изображения без избыточного кода - PullRequest
Новая
       29

css3 градиенты и прозрачные фоновые изображения без избыточного кода

0 голосов
/ 27 мая 2011

На моей странице есть набор кнопок с одинаковым градиентным фоном, применяемый через класс "синий". Я хотел бы добавить разные фоновые изображения для каждого, накладывая их поверх градиента, без необходимости индивидуально кодировать каждое из них с параметрами градиента и фонового изображения.

Прозрачное фоновое изображение с градиентом этот вопрос показывает метод градиента + изображение, но требует, чтобы каждая из кнопок имела градиент, примененный индивидуально. подтверждение концепции как минимум.

есть ли способ их объединить?

CSS: 

       .blue {
            background:#3c4658;
            background:-moz-linear-gradient(top, #3c4658 0%, #1c222e 50%);
            background:url('../img/stop.png') 0 0 no-repeat,
            -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c4658), color-stop(50%,#1c222e));
            background:url('../img/stop.png') 0 0 no-repeat,
            -webkit-linear-gradient(top, #3c4658 0%,#1c222e 50%);
            background:-o-linear-gradient(top, #3c4658 0%,#1c222e 50%);
            background:-ms-linear-gradient(top, #3c4658 0%,#1c222e 50%);
            filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3C4658', endColorstr='#1C222E',GradientType=0 );
            background:linear-gradient(top, #3c4658 0%,#1c222e 50%);
       }
       a.jp-stop {
            background-image:url("../img/stop.png");
            width:35px;
            height:23px;

       }

Ответы [ 2 ]

1 голос
/ 30 мая 2011

Вы можете использовать способ Gallagher CSS2.1 для применения нескольких фонов с псевдоэлементами: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Также очень плохая идея использовать имена презентационных классов, такие как «синий». Что если в будущем вы захотите, чтобы он был красным? Изменить разметку?

0 голосов
/ 28 мая 2011

Теоретически вы должны иметь класс для каждой кнопки, которая просто применяет background-image.

Например 

.button1 { background-image: url(foo.png); }

Тогда в HTML 

<button class="blue button1">my button</button>
...