Question

我已经有了一个页面背景，所以我创建了<div>，这样我就可以拥有此部分的背景图片，然后在其顶部添加内容，我无法获得不过，这可行。任何帮助将不胜感激。

＆＃13;

div style="position:relative; left:0; top:0;">
  <img src="BackgroundImage" style="position:relative; top:0; left:0;" width=100%/>
  <img src="Overlay image" style="position:relative; top:1; left:0;" width 50%/>
</div>

＆＃13;

我希望该图片上的其他内容能够居中。

Answer 1

我认为你对如何使用src属性感到困惑，它意味着你的图像文件的路径，如<img src="./images/my_background.jpg"/>

此外，如果您想将图像用作背景，最好使用CSS

将其添加到div中

 <div class="my_content">
   ...my content...
 </div>
 <style>
   .content{
     background-image: url(./images/my_background.jpg);
     background-position: center center;
     background-size: cover;
   }
</style>

您可以在一个div中引用this question多个背景

Answer 2

我不确定我是否理解正确，但如果你想在你的图片上放置一个内容块，你必须创建一个div，然后将其设置为position:absolute，其中z-index更大一些比其他人。

<强>更新

我与left:25%对齐，这是50％宽度的一半，但你真的应该将图像与固定单位对齐，我建议使用另一个stackoverflow答案来理解对齐。

How do I horizontally center an absolute positioned element inside a 100% width div?

＆＃13;

<div style="position:relative; left:0; top:0;width:500px">
      <div style="position:absolute; top: 0; left:0; z-index:2;">Write text here on top of all the other images</div>
      <img src="//c1.staticflickr.com/5/4533/38531735191_e41a157f7c_b.jpg" style="position:absolute; top:0; left:0;z-index:0; margin: 0 auto;" width=100%/>
      <img src="//c1.staticflickr.com/5/4517/24659153638_f55cc21bdc_k.jpg" style="position:absolute; top:0; left:25%;z-index:1; margin: 0 auto;" width=50%/>
</div>

＆＃13;

Answer 3

您可以在后台安装一个，然后正常编辑，您无需覆盖所有内容。

覆盖图像上的内容

3 个答案: