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

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

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

Предположим, я хочу отобразить стрелку в 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 потеряно из сокращенного определения?

12
задан BoltClock 14 June 2012 в 14:18
поделиться