Question

我正在撰写一篇博客文章（博客），其中我想分享一封信。这封信的文字我把它放在一个浅灰色的div中，右边和底部有一个阴影，所以它看起来像一张纸。

我的HTML说的是：

This is my post. Blah blah blah<br />
<br />
Here is more text, blah bla blah. And this is the letter:<br />
<br />
<div style="background-color: #f7f7f7; box-shadow: 3px 3px 8px #DBDBDB; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; padding-top: 35px;">
28 August 2015<br />
<br />
This is the letter, blah blah blah.<br />
<br />
Here mor parragraphs of the letter, bla bla bla. <br />
<br />

这使我的帖子看起来像这样：http://i.stack.imgur.com/xUNNL.png

现在，我想在我的灰色div上面添加一个数字纸胶带（就像一块cellotape），所以看起来这封信已经被卡在那里。

像这样：http://i.stack.imgur.com/78kyz.jpg

我怎么能在HTML中这样做？（我直接在一个博客博客中写作）

感谢。

Answer 1

您可以在div中添加图片，为其指定ID或类，并为其指定属性：的z-index：10; //或者你想要的任何数字这样做，它将把这个图像带到其他所有的前面位置：绝对的; 左：50％; //它会把它带到中间。

<img src="image-src" style="z-index:10; position:absolute; left:50%">

简化版。

Answer 2

我认为你的字母div位于relative。要实现这个数字清洗带，只需在字母div中放入另一个div并将其定位absolute。这样的事情：
.cellotape { height:100px; width:400px; position:absolute; top:-20px; left:500px; }

Answer 3

这是fiddle example

将此.img课程添加到您的图片中：

.img{
    position: relative;
    top: 0;
    margin-top: -60px;
    left: calc(50% - 50px);
    width: 100px;
    height: 50px;
    background: lightcoral;
}

这会将您的图像位置设置为相对位于字母顶部的中心位置。

您必须在信件中添加图像，如下所示：

<div class='letter'>
    <div class='img'></div>
    28 August 2015<br />
    <br />
    This is the letter, blah blah blah.<br />
    <br />
    Here mor parragraphs of the letter, bla bla bla. <br />
    <br />

</div>

请注意，我div只是为了向您展示如何完成任务。

Answer 4

您可能需要调整左侧百分比，高度和宽度以满足您的需求，但这应该适合您

<style>
.topImg {
    position: absolute;
    left: 25%;
    z-index: 10;
    width: 500px;
    height: 335px;
}
</style>



<img src="" class="topImg">

Answer 5

如果您只能使用内嵌样式，则可以尝试以下内容...

＆＃13;

This is my post. Blah blah blah<br />
<br />
Here is more text, blah bla blah. And this is the letter:<br />
<br /><br /><br />
<div style="background-color: #f7f7f7; box-shadow: 3px 3px 8px #DBDBDB; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; padding-top: 35px;">
  <div style="width:50px; margin:0 auto">
  <img style="width:50px; position:absolute; margin:-60px auto 0;" src="https://i.stack.imgur.com/ue96u.jpg?s=328&g=1" />
</div>
28 August 2015<br />
<br />
This is the letter, blah blah blah.<br />
<br />
Here mor parragraphs of the letter, bla bla bla. <br />
<br />

＆＃13;

如何将图像放在div的顶部（水平居中但垂直顶部，中间）

5 个答案: