在 CSS 中定义 <img> 的 src 属性 [重复]答案

【问题标题】：Define an <img>'s src attribute in CSS [duplicate]在 CSS 中定义 <img> 的 src 属性 [重复]
【发布时间】：2011-02-10 05:03:51
【问题描述】：

我需要在 CSS 中定义一个的 src 属性。有没有办法指定这个属性？

【问题讨论】：

标签： css attributes image

【解决方案1】：

这只是因为 img 标签是一个内容元素

img {
    content:url(http://example.com/image.png);
}

【讨论】：

img 也悬停？
目前，数据 URI 仅适用于 Chrome。 content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='181' .....
这不是公认的答案吗？今天我认为这在浏览器中得到了广泛的实现
虽然不适用于 Firefox 91.5

【解决方案2】：

#divID {
    background-image: url("http://imageurlhere.com");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}

【讨论】：

@zipcodeman ：太糟糕了。 background-image: 方法有一些限制。就像，您无法控制图像的尺寸。当然，您可以将图像空间放大，而不是实际图像。
@GregoryLewis 我认为这样更好：stackoverflow.com/questions/2182716/…
@zipcodeman - 您可以使用background-size:cover 更改图像的大小，然后更改高度和宽度。
今天，2017 年，background-image 不是解决方案。制作这个，我有 2 张图片

【解决方案3】：

不，没有。您可以指定背景图片，但不是一回事。

【讨论】：

确实如此。 <img> 表示内容图像。如果图像不是内容，那么它不应该是 <img> 元素。如果它是满足的，那么它应该是。如果内容在多个页面上重复（例如作为菜单的一部分），那么它的 HTML 也应该像任何其他重复的内容一样（例如使用模板系统）。

【解决方案4】：

CSS 不用于定义 DOM 元素属性的值，javascript 会更适合。

【讨论】：

【解决方案5】：

没有。您可以获得的最接近的是设置背景图片：

<div id="myimage"></div>

#myimage {
  width: 20px;
  height: 20px;
  background: white url(myimage.gif) no-repeat;
}

【讨论】：

【解决方案6】：

在尝试了这些解决方案后，我仍然不满意，但我在article 中找到了一个解决方案，它适用于 Chrome、Firefox、Opera、Safari、IE8+

#divId {

  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */

}

【讨论】：

我正要发布同一篇文章，它对我来说非常适合，我必须在我的网站上支持 IE。如果它适用于 IE...

【解决方案7】：

他们是对的。 IMG 是一个内容元素，而 CSS 是关于设计的。但是，当您将某些内容元素或属性用于设计目的时会怎样呢？我的网页上有 IMG，如果我更改样式（CSS），则必须更改。

这是一个用 CSS 样式定义 IMG 表示（不是真正的图像）的解决方案。
1：创建 1x1 透明 gif 或 png。
2：将 IMG 的属性“src”分配给该图像。
3：使用 CSS 样式中的“背景图像”定义最终呈现。

它就像一个魅力:)

【讨论】：

如果你需要 <img> 来打印它就行不通了，我就是这种情况。
您有 1x1 透明 gif 或 png 供下载吗？ html and css code 的任何完整样本？