html – 使用CSS将背景图像添加到按钮

概述我正在尝试将背景图像添加到已具有背景颜色的按钮(或具有相同类的链接). 这是jsfiddle：http://jsfiddle.net/BNvke/ 该按钮本身看起来很棒,但我试图这样做,以便如果我添加某个类,将调整填充并显示背景图像,但图像不显示.这是CSS / HTML： .button {padding: 10px; margin-right: 8px;margin-bottom:10p 我正在尝试将背景图像添加到已具有背景颜色的按钮(或具有相同类的链接).

这是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(@R_419_6822@://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;padding-left: 35px;padding-right: 15px;}​

–

<p><a >Without Background</a></p><p><a >With Background</a></p>​

如何才能显示该背景图像？

解决方法 见 http://jsfiddle.net/BNvke/1/

只是改变

background-image url(@R_419_6822@://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;

同

background: url(@R_419_6822@://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;

并向上移动最后一条规则,以便为.button_blue定义的背景颜色规则可以应用于级联

总结

以上是内存溢出为你收集整理的html – 使用CSS将背景图像添加到按钮全部内容，希望文章能够帮你解决html – 使用CSS将背景图像添加到按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。