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

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

Adding an image to submit button using CSS

Submit Button Image

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

Answer 1

您无法使用CSS修改HTML，只能修改HTML的外观。由于<img>的图片网址是在HTML中指定的，因此您无法对其进行更改。

这是可以做的事情：

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

Answer 2

使用伪元素作为一种＆＃34;替身＆＃34;图片标签可能值得探索。

此解决方案将为您提供更多灵活性，使其能够以背景图像无法实现的方式进行样式设置。

在这种情况下，将:pseudo-element视为＆＃34;人工img元素＆＃34;作为＆＃34;替代＆＃34;对于您现在隐藏的原始img元素。

＆＃13;

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

＆＃13;

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

＆＃13;

<强> MDN

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

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

使用css覆盖提交按钮图像

2 个答案: