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

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

12 голосов
/ 25 марта 2011

Предположим, я хочу отрисовать стрелку в CSS, которая должна иметь голову, хвост и гибкую ширину, чтобы она могла содержать текст.Конечно, я могу создать несколько элементов div, чтобы получить то, что я хочу, но как это можно сделать в 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 потеряно из краткого определения?

Ответы [ 2 ]

24 голосов
/ 25 марта 2011

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

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

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

jsFiddle demo

Объявление 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 demo

2 голосов
/ 25 марта 2011

Я считаю, что использование нескольких фоновых изображений проблематично для подобных вещей. Рассматривали ли вы возможность использования псевдоэлементов: 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 на нужные вам изображения стрелок.

...