Geek asks and answers

Several CSS3 background buttons (+ transparency)

This is the code that I still have:

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;

The button looks like this:

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

My normal code will work, but in this case it url(../images/red-button-bg-tile.png)goes under the left and right images and, since it is transparent, ruined the button style.

What trick?

+3
source share
3 answers

Set the transparent left and right border width of your left and right corner image and use background-clip:padding-box;only for mosaic background. If this is not clear, I will gladly edit the script that you provide.

+2
source

, . , . , , .

CSS3 ( ), , , border-radius ( , , ) .

0

Have you tried reordering background values ​​in css? for example, put url (../images/red-button-bg-tile.png) either the last or the first, and change the position and repeat accordingly.

0
source

More articles:


All Articles