我正在尝试将背景图像添加到已具有背景颜色的按钮(或具有相同类的链接).
这是jsfiddle:http://jsfiddle.net/BNvke/
该按钮本身看起来很棒,但我正在努力使它如果我添加某个类,将调整填充并显示背景图像,但图像不显示.这是CSS / HTML:
.button { padding: 10px; margin-right: 8px; margin-bottom:10px; font-family: Arial,Tahoma,Verdana,FreeSans,sans-serif; text-shadow:0 1px 1px rgba(0,0.25); display: inline-block; white-space: Nowrap; line-height:1em; position:relative; outline: none; overflow: visible; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius:4px; Box-shadow:1px 1px 2px 0 #CCCCCC; -moz-Box-shadow: 1px 1px 2px 0 #CCCCCC; -webkit-Box-shadow: 1px 1px 2px 0 #CCCCCC; } .button_blue { border: 1px solid #305875; color: #FBFBFB; background-color: #3D6E97; } .button_blue:hover { color: #FBFBFB; opacity:0.9; filter:alpha(opacity=90); } .button_about { background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat; padding-left: 35px; padding-right: 15px; }
–
<p><a class="button button_blue">Without Background</a></p> <p><a class="button button_blue button_about">With Background</a></p>
如何才能显示该背景图像?
解决方法
见
http://jsfiddle.net/BNvke/1/
只是改变
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
同
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
并向上移动最后一条规则,以便为.button_blue定义的背景颜色规则可以应用于级联
原文地址:https://www.jb51.cc/html/231726.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。