使用 css 覆盖提交按钮图像答案

【问题标题】：Override submit button image using css使用 css 覆盖提交按钮图像
【发布时间】：2017-03-28 05:07:02
【问题描述】：

我正在研究 CSS 用户样式，问题是我似乎无法修改编码为网页 html 代码的按钮中的图像：

<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>

我可以通过 CSS 进行更改的最接近方法是更改实际按钮的代码并通过 .subscribe-button-container .subscribe .dropdown-menu li form .control-group button{background-image:url("http://i.imgur.com/XYHilSy.png");} 更改其背景，而不是替换其中包含的图像。有可能实现我想要做的事情，还是这些图像只是硬编码到 HTML 中？

我读过这些： How to change an input button image using CSS?

Adding an image to submit button using CSS

Submit Button Image

但他们都假设我可以修改html代码，而我只能尝试覆盖css

【问题讨论】：

标签： html image css

【解决方案1】：

不能用 CSS 修改 HTML，只能修改 HTML 的外观。因为<img>的图片url是用HTML指定的，所以不能修改。

这是你可以做的：

隐藏图片（display: none 或opacity: 0）
为按钮指定背景图片

【讨论】：

【解决方案2】：

使用伪元素作为一种“替代”图像标签可能值得探索。

此解决方案将为您提供更大的灵活性，让您可以更灵活地设置此元素的样式，而这在背景图像中是不可能的。

在这种情况下，将:pseudo-element 视为您的“人工img 元素”，它充当您现在隐藏的原始img 元素的“替换”。

.btn img {
    display: none;
}

.btn:before {
    content: "";
    display: block;
    background: url(https://s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png);
    max-width: 18px;
    max-height: 18px;
    width: 18px;
    height: 18px;
}

&lt;button type="submit" class="btn btn-default"&gt;&lt;img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"&gt;&lt;i class="fa fa-spinner fa-spin" style="display:none;"&gt;&lt;/i&gt;&lt;/button&gt;

MDN

::before 创建一个伪元素，它是元素匹配。它通常用于将化妆品内容添加到使用 content 属性的元素。这个元素是内联的默认。

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

【讨论】：