Question

我正在尝试使用渐变背景和图像的按钮。这就是我到目前为止所做的：

如果你看按钮，你会发现渐变只是在图像周围而不是整个按钮。

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

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

HTML：

<button class="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, #3ba93d, #27842a); /* FF3.6+ */
    background-image: url(http://goo.gl/mw5HWR), -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
    background-image: url(http://goo.gl/mw5HWR), -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
    background-image: url(http://goo.gl/mw5HWR), linear-gradient(top, #3ba93d, #27842a); /* W3C */
    }

提前致谢。

Answer 1

可以尝试：

        <button class="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, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
            background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
            background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
            background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
            background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
            background: linear-gradient(top, #3ba93d, #27842a); /* W3C */
            }
          .button span {
            position: absolute;
            top: 17px;
            left: 100px;
            width: 20px;
            height: 24px;
            background: url(http://goo.gl/mw5HWR);
          }
           </style>

JS Fiddle

Answer 2

基于@ simon-davies回答

你也可以省略＆＃34; span＆＃34;元素：

.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, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
            background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
            background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
            background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
            background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
            background: linear-gradient(top, #3ba93d, #27842a); /* W3C */
            }
          :before {
            content : "";
            position: absolute;
            top: 17px;
            left: 100px;
            width: 20px;
            height: 24px;
            background: url(your_image_url) no-repeat;
          }
}

Answer 3

这种风格正在推动渐变：

 background-position: 66px 4px;

如果删除它，渐变会填充按钮。

http://jsfiddle.net/D6xKD/9/

如果您需要将苹果放在某个位置，我建议您扩展图片的画布以帮助其放置。

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

3 个答案: