Question

我目前正在为CMS创建一个模板，该模板可能会有一些与内容无关的图像。它们将显示在文本后面。由于它们将由用户上传，因此我无法通过CSS将它们作为背景图像插入。所以另外两种可能性也是将它们添加为图像并通过CSS将它们放在背景中，或者通过向父div添加样式属性将它们作为背景图像插入。这两个选项都不是很完美，但我想知道这两个选项中的哪一个将是＆＃34;更多＆＃34;纠正一个。

Answer 1

来自HTML spec：

4.7.1.1.9一个没有添加任何信息的纯装饰图像

纯粹的装饰性图像是视觉增强，装饰或装饰，不会为可以观看图像的用户提供超出美学的功能或信息。

使用空alt属性（alt=""）标记纯粹的装饰性图像，以便辅助技术可以忽略它们。虽然将内部装饰图像包含在内并不是不可接受的，但如果它们纯粹是装饰性的，建议使用CSS来包含图像。

所以无论哪种方式都可以接受，但最好使用CSS，特别是如果你不想用装饰图像污染你的标记。

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

Answer 2

这是一个复杂的事情，就像两个答案都是半正确的。你可以两种方式使用。

第1步

如果您想将它用作背景图像，那么您必须在css中为该div提供其余的css属性。和你必须排队的图像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标记

2 个答案:

4.7.1.1.9一个没有添加任何信息的纯装饰图像