有背景梯度和图象的按钮使用html和css

概述我想要一个带有渐变背景和图像的按钮.这是我到目前为止： jsfiddle/D6xKD/ 如果您查看按钮,您可以看到渐变仅在图像周围而不是整个按钮. 注意：这个解决方案我从其他参考资料中获取了一个带有渐变背景和背景图像的按钮. 我的问题是：如何使梯度和图像适用于包括ie7及以上的跨浏览器？ HTML： <button class="button" onclick="submit();" type=" 我想要一个带有渐变背景和图像的按钮.这是我到目前为止：

jsfiddle/D6xKD/

如果您查看按钮,您可以看到渐变仅在图像周围而不是整个按钮.

注意：这个解决方案我从其他参考资料中获取了一个带有渐变背景和背景图像的按钮.

我的问题是：如何使梯度和图像适用于包括ie7及以上的跨浏览器？

HTML：

<button  onclick="submit();" type="button">Text button</button>

CSS：

.button{    color: #FFFFFF;    display: inline-block;    Font-family:Arial;    Font-size: 10px;    Font-weight: normal;    padding: 9px 36px 9px 4px;    text-decoration: none;    margin:4px auto auto;    cursor:pointer;     border:0px;    background: #3ba93d;    background-position: 66px 4px;    background-repeat:no-repeat;    background-image: url(http://goo.gl/mw5HWR); /* fallback */    background-image: url(http://goo.gl/mw5HWR),-webkit-gradIEnt(linear,left top,left bottom,from(#3ba93d),to(#27842a)); /* Saf4+,Chrome */    background-image: url(http://goo.gl/mw5HWR),-webkit-linear-gradIEnt(top,#3ba93d,#27842a); /* Chrome 10+,Saf5.1+ */    background-image: url(http://goo.gl/mw5HWR),-moz-linear-gradIEnt(top,#27842a); /* FF3.6+ */    background-image: url(http://goo.gl/mw5HWR),-ms-linear-gradIEnt(top,#27842a); /* IE10 */    background-image: url(http://goo.gl/mw5HWR),-o-linear-gradIEnt(top,#27842a); /* Opera 11.10+ */    background-image: url(http://goo.gl/mw5HWR),linear-gradIEnt(top,#27842a); /* W3C */    }

提前致谢.

解决方法 可以尝试：

<button  onclick="submit();" type="button">Text button <span></span></button>        <style>        .button{            color: #FFFFFF;            Font-family:Arial;            Font-size: 10px;            Font-weight: normal;            padding: 0;            padding-left: 20px;            height: 36px;            wIDth: 120px;            margin:4px auto auto;            text-align: left;            cursor:pointer;             border:0px;            background: #3ba93d;            background-position: 66px 4px;            background-repeat:no-repeat;            background: #3ba93d; /* fallback */            background: -webkit-gradIEnt(linear,Chrome */            background: -webkit-linear-gradIEnt(top,Saf5.1+ */            background: -moz-linear-gradIEnt(top,#27842a); /* FF3.6+ */            background: -ms-linear-gradIEnt(top,#27842a); /* IE10 */            background: -o-linear-gradIEnt(top,#27842a); /* Opera 11.10+ */            background: linear-gradIEnt(top,#27842a); /* W3C */            }          .button span {            position: absolute;            top: 17px;            left: 100px;            wIDth: 20px;            height: 24px;            background: url(http://goo.gl/mw5HWR);          }           </style>

JS Fiddle

总结

以上是内存溢出为你收集整理的有背景梯度和图象的按钮使用html和css全部内容，希望文章能够帮你解决有背景梯度和图象的按钮使用html和css所遇到的程序开发问题。

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