如何解决多个CSS3背景按钮+透明度
| 这是我到目前为止的代码: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)
位于左侧和右侧的图像下方,并且由于它是透明的,因此弄乱了按钮样式。
诀窍是什么?
解决方法
为左右角图像的宽度设置透明的左右边框,并仅将ѭ3用作平铺背景。
如果听起来不清楚,我很乐意编辑您提供的小提琴。
, 诀窍是不要在终端上使用透明度。最简单的方法是使透明部分的颜色与您的主要背景相同。您的中间背景是整个图像的整体,在最终图像的下方,从而显示了透明区域。
由于您已经在使用CSS3(多个背景),因此,根据图像的外观,您还可以切换到
border-radius
(或将其用于四舍五入,并假设背景为圆角,则假定透明度为圆角)和渐变背景。
, 您是否尝试过在CSS中重新排列背景值?例如将url(../ images / red-button-bg-tile.png)放在最后或最前面,然后更改位置并相应地重复。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。