使用 css 覆盖提交按钮图像

Question

我正在研究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 中？

我读到这些：如何使用CSS更改输入按钮图像？

使用 CSS 添加要提交的图像按钮

提交按钮图像

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

Answer 1

你不能用CSS修改HTML，只能修改HTML的外观。由于<img>的图像网址是在 HTML 中指定的，因此您无法更改它。

以下是您可以执行的操作：

1. 隐藏图像(display: none或opacity: 0(
2. 指定按钮的背景图像

Answer 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;
}

<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>

多核

::before创建一个伪元素，该伪元素是 元素匹配。它通常用于将化妆品内容添加到 元素，通过使用内容属性。此元素内联为 违约。

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