使用type ="image"为输入标记的css更改'src'值

Question

是否可以<input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../>通过css 更改src属性的值？

问题是:我想指定哪个图片将仅使用css显示为提交按钮(因此设计团队将仅更改css文件!).如果我使用替代方式<input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/>并在css中指定此元素的背景 - 如果禁用了图片,则效果不佳. - 没有显示任何替代文字而不是图片.然而,第一种方式解决了这种情况......

请指点一下

谢谢.

Answer 1

属性选择器可能有用，但它们不太灵活。试试这个：

img[src=""] {
  background-image: url('none.png');
  height: 100px; /* Height of BG image */
  width: 100px; /* Width of BG image */
}

它不会改变图像的src=属性，但执行相同的功能。

这是我的想法。

您可以使用 JavaScript读取标签的样式表<img>，并进行相应的修改。

我说的是类白名单，就像big, small, center应用到图像的所有其他类一样，都是通过 JavaScript 解释的。设计团队可以使用CSS，但它不会以预期的方式呈现，如下所示（Python + JavaScript）：

for every <img> tag:
  if tag.classes contains class not in whitelist:
    for every class not in whitelist:
      this.src = newClass.backgroundImage;
      this.removeClass(newClass)

它读取属性的 CSS background-image，但它只是窃取图像的 URL 并src=使用该 URL 设置属性。然后，JavaScript 将删除该类，导致它无法呈现。