使用HTML< img>标记为背景图片，而不是CSS background-image属性? [英] Use the HTML <img> tag as a background image instead of the CSS background-image property?

问题描述

我需要使用html < img> 标记作为< div> 的背景图片.然后，我将在此内容上放置内容的< p> .我已经尝试过了，但是似乎无法正确显示它们.我使用的是相对位置，边距为负值.

I need to use the html <img> tag as a background image for a <div>. I will then be placing a <p> of content over this. I've tried this but cant seem to get them to display correctly. I've used position relative, margin with negative values.

任何建议或指向正确方向的建议都会受到赞赏.

Any suggestions or point me in the right direction would be appreciated.

<div>

  <img src="http://www.shiaupload.ir/images/77810787432153420049.png" />

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
  </p>

</div>

推荐答案

要几乎完全复制用于背景图像的功能，我们必须考虑 img 的功能，包括:

To make an almost perfectly duplicate of the features used for background-image, we've to consider the features of the img include:

• 它没有任何指针事件.
• 它已呈现在 div 下面至少一层.

• It doesn't have any pointer events.
• It's rendered at least one layer below the div.

结果将是类似于此jsfiddle :

div {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

img {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

您可以根据需要修改宽度和高度.

You might modify the width and height to your needs.

这篇关于使用HTML< img>标记为背景图片，而不是CSS background-image属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！