如何在歌剧中支持按钮的css背景图像属性答案

【问题标题】：How to support css background image property for buttons in opera如何在歌剧中支持按钮的css背景图像属性
【发布时间】：2014-04-13 11:40:54
【问题描述】：

css 不支持 opera web 浏览器中按钮的背景图像属性。我自己创建时使用 css 背景图像属性，但是当我使用 opera 浏览器时它没有出现。当我使用 firefox 时它看起来很好......但是我看到按钮背景图像正确支持opera中的某些网站我如何在opera网络浏览器中做到这一点？

例如：http://ikman.lk/en/ads-in-gampaha（请参阅此网站的搜索按钮图像...它在歌剧中显示得很好）

【问题讨论】：

【解决方案1】：

您链接到的网站只是使用了一个内部带有跨度的按钮元素。跨度具有 CSS 渐变背景。 span 内部是一个 i 元素，它有一个搜索图标背景图像。他们可能使用这种设置不是因为 opera 的问题，而是因为他们使用的是图像精灵，并且嵌套的 i 元素可以做得很小，即使按钮较大，精灵图像的其他部分也不会显示。

按钮没有为渐变或图标做任何与背景相关的事情，所以 Opera 是否支持这一点并不重要。

顺便说一句，Opera 现在正在使用 Blink 引擎，所以如果 Chromium 和 Chrome 支持按钮属性，那么 Opera 从 15 版本开始也应该支持。

【讨论】：

【解决方案2】：

此图标不是按钮的直接 css 背景图像，而是放置在按钮内的 I elemnet。

这里是html：

<button class="btn large search-btn" type="submit">
    <span>
         <i class="ico-search-btn"></i>
    </span>
</button>

然后他们为.ico-search-btn添加了背景。

你试过这样吗？

【讨论】：