Несколько фоновых изображений и фоновый цвет

Предположим, я хочу отобразить стрелку в CSS, которая должна иметь голову, хвост и гибкую ширину, чтобы она могла содержать текст. Конечно, я могу создать несколько разделов, чтобы получить то, что хочу, но как это сделать в CSS3?

Я могу использовать несколько фоновых изображений:

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

HTML:

<div class="arrow">This text is on a transparent background</div>

Это дает мне div со стрелкой и хвостом, а также прозрачную среднюю часть. Не представляется возможным указать цвет средней части.

Только с одним фоновым изображением вы можете сделать это:

div.arrow{ background: red url('some_image.png') no-repeat; }

Я знаю, что это выполнимо многими способами, но действительно ли свойство background-color теряется из сокращенного определения?


background-color css background-image
person Frederik Wordenskjold    schedule 25.03.2011    source источник

Ответы (2)


arrow_upward
27
arrow_downward

Нет, это не совсем потеряно из стенографического объявления. Вы по-прежнему можете указать цвет фона, но только для последнего (среднего) слоя (вне зависимости от того, помещаете ли вы туда изображение):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

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

демонстрация jsFiddle

Однако отдельное объявление background-color может быть намного лучше для вашего сценария, поскольку оно позволяет использовать разные цвета на основе одних и тех же фоновых изображений (если вы хорошо работаете с прозрачными пикселями в частях ваших изображений, которые должны быть заполнены цветом фона CSS) :

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

демонстрация jsFiddle

person BoltClock    schedule 25.03.2011
comment
Это круто. Он работает в IE9, но не в IE9 в режиме «совместимости». - person Steve Wellens; 25.03.2011
comment
@Steve Wellens: потому что в режиме совместимости с IE9 не используется механизм рендеринга IE9. Не помню, 7 или 8. - person BoltClock; 25.03.2011
comment
Ах спасибо. Проблема заключалась в непрозрачных фоновых изображениях. Конечно, background-color заполнит прозрачные области, создав впечатление, что он просто перезаписывает bgs! - person Frederik Wordenskjold; 25.03.2011

arrow_upward
2
arrow_downward

Я считаю использование нескольких фоновых изображений проблематичным для таких вещей. Рассматривали ли вы возможность использования псевдоэлементов :before и :after? Я написал быстрый пример:

<style>
    .arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
    .arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
    .arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>

<div class="arrow">This text is on a transparent background</div>

Просто замените цвет фона в объявлениях :before и :after на нужные изображения стрелок.

person Jonathan Miller    schedule 25.03.2011
comment
На самом деле, я не думал об этом. Хорошее решение! - person Frederik Wordenskjold; 25.03.2011
comment
@Frederik: И в области совместимости немного лучше :) - person BoltClock; 25.03.2011
comment
да, я знаю :) Я просто немного возился с css3, чтобы проверить материал. Но да, все еще способ без поддержки полагаться на него в реальном проекте. - person Frederik Wordenskjold; 25.03.2011