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

Posted 2023-03-05

【中文标题】在 CSS 中定义 <img> 的 src 属性 [重复]

【英文标题】：Define an <img>'s src attribute in CSS [duplicate]

【发布时间】：2011-02-10 05:03:51

【问题描述】：

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

【问题讨论】：

见***.com/a/10247567/461499

***.com/questions/2182716/…

【参考方案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 我认为这样更好：***.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 的任何完整样本？