несколько фоновых кнопок CSS3 (+ прозрачность)

Question

Это код, который у меня есть:

background: none;
background-image: url(../images/red-button-bg-left.png), url(../images/red-button-bg-tile.png), url(../images/red-button-bg-right.png);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 0 0, 19px 0, 100% 0;

Кнопка выглядит следующим образом:

[left corners image][body image][right corners image]

Обычно мой код будет работать, но в этом случае url(../images/red-button-bg-tile.png)идет под левым и правым изображениями и, поскольку он прозрачный, портит стиль кнопки.

В чем прикол?

Answer 1

Установите прозрачную левую и правую границу ширины левого и правого углового изображения и используйте background-clip:padding-box; только для мозаичного фона.Если это покажется неясным, я с удовольствием отредактирую предоставленную вами скрипку.

Answer 2

вы пробовали переупорядочивать значения фона в css?например, поместите url (../ images / red-button-bg-tile.png) либо последним, либо первым, измените положение и, соответственно, повторите.

Answer 3

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

Поскольку вы уже используете CSS3 (несколько фонов), в зависимости от того, как выглядят ваши изображения, вы также можете переключиться на border-radius (или использовать его для округления и просто сделать фон в квадрате, предполагая, чтопрозрачность для закругления углов) и градиентных фонов.