与内容无关的图像。背景图像样式属性与 img 标签

Question

我目前正在为 CMS 创建一个模板，其中可能包含一些与内容无关的图像。它们将显示在文本后面。由于它们将由用户上传，我无法通过 CSS 将它们作为背景图像插入。因此，其他两种可能性也是要么将它们添加为图像并通过 CSS 将它们放置在背景中，要么通过向父级 div 添加样式属性将它们作为背景图像插入。这两个选项都不是很完美，但我想知道这两个选项中哪一个是 "more" 正确的。

Answer 1

来自HTML spec：

4.7.1.1.9 A purely decorative image that doesn't add any information

Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images.

Mark up purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt=""). While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.

所以任何一种方式都是可以接受的，但使用 CSS 更可取，特别是如果您不想用装饰性图像污染您的标记。

当您需要以不同方式设置单个元素的样式但又不想为它们生成 CSS 规则时，使用内联样式属性是一种可接受的替代方法。最纯粹的方法是在 自定义数据属性 中指定图像 URL 而不是内联样式属性，但您将无法获取它的值属性并将其应用于 background-image 属性使用 CSS 自 no browser supports that ability yet 以来，因此内联样式是您的下一个最佳选择。

Answer 2

这两个答案都是半正确的，这很复杂。两种方式都可以使用。

第 1 步

如果您想将其用作背景图像，则必须将 css 属性的其余部分分配给 css 中的 div。和 image-URL 样式，你必须在行中给出。

第 2 步

对于这一步，您必须使用位置标签来定义它们的位置。如果您想将图像保留在背景中，那么下面是通过 postion 标记执行此操作的最简单方法。

HTML

<div class="parent-block">
    <div class="child-image-block">
        <img src="xyz.png"/>
    </div>
    <div class="child-content-block">
        " your content goes here"
    </div>
</div>

CSS

.parent-block { position: relative;}
.child-image-block {position: absolute; z-index:1;}
.child-content-block {position: relative;  z-index:2;}

与内容无关的图像。背景图像样式属性与 img 标签

Not content-relevant image. Background image style Attribute vs. img tag

html

css

image

background-image

4.7.1.1.9 A purely decorative image that doesn't add any information