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

Question

我目前正在为CMS创建一个模板，它可能会有一些与内容无关的图像。它们将显示在文本后面。因为他们将由用户上传，我不能插入他们通过CSS作为背景图像。因此，另外两种可能的方法是，要么将它们作为图像添加，然后通过CSS将它们放到后台，要么将它们作为背景图像插入到父div中。这两个选项都不是很完美，但我想知道这两个选项中哪一个会是“更”正确的选项。

Answer 1

来自HTML规范

4.7.1.1.9不添加任何信息的纯装饰性图像 纯粹的装饰图像是视觉增强，装饰或装饰，没有提供功能或信息，除了美学，用户谁可以看到这些图像。 标记纯粹的装饰性图像，以便通过使用空alt属性(alt="")，辅助技术可以忽略它们。虽然内联中包含装饰性图像并不是不可接受的，但如果它们纯粹是装饰性的，则建议使用CSS将图像包括在内。

因此，这两种方法都是可以接受的，但使用CSS更可取，特别是如果您不希望用装饰图像污染您的标记。

使用内联样式属性是一种可以接受的替代方法，因为您需要对单个元素进行不同的样式设置，但您不希望为它们生成CSS规则。最纯粹的方法是在自定义数据属性中指定图像URL，而不是内联样式属性，但是您将无法使用该属性的值并使用CSS将其应用到自background-image以来的目前还没有浏览器支持这种能力。属性，因此内联样式是您的下一个最佳选择。

Answer 2

这是一件很复杂的事情，两种答案都是半正确的。两种方法都可以。

步骤1的()

如果要将其用作背景图像，则必须将css属性的其余部分交给css中的div。以及你必须给出的图片-URL样式。

步骤2的()

对于这个步骤，您必须使用“位置”标记来定义它们的位置。因为你想要保持图像在背景，那么下面是最简单的方式来做到这一点，通过位置标签。

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