如何在引导程序中另一个图像的左上角添加图像？

Question

我有一个使用bootstrap 创建的thumbnail，它看起来像这样

这是代码

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img src="https://unsplash.it/g/500/300?image=24" alt="...">
        <div class="caption">
            <a href="#">
                <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
            </a>
            <div class="row row-tags">
                <a href="#"><span class="label label-primary">JavaScript</span></a>
                <a href="#"><span class="label label-primary">JavaScript</span></a>
                <a href="#"><span class="label label-primary">JavaScript</span></a>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
</div>

我想在图像的左上角添加一些文本来显示日期和月份，我该如何实现？因为添加相对于 div 的位置并插入图像会弄乱图像位置。

Answer 1

您可以在您的txtDiv 上使用position: absolute。检查下面更新的 sn-p..

.thumbnail {
    position: relative;
}
.thumbnail img {
    width: 100%;
}
.txtDiv {
    position: absolute;
    left: 15px;
    top: 0px;
    background: rgba(255,0,0,0.5);
    color: #fff;
}
body{
    margin: 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="https://unsplash.it/g/500/300?image=24" alt="...">
                    <div class="caption">
                        <a href="#">
                            <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
                        </a>
                        <div class="row row-tags">
                            <a href="#"><span class="label label-primary">JavaScript</span></a>
                            <a href="#"><span class="label label-primary">JavaScript</span></a>
                            <a href="#"><span class="label label-primary">JavaScript</span></a>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    </div>
                    <div class="txtDiv">Dummy Text</div>
                </div>
            </div>

Answer 2

希望这个 sn-p 对你有所帮助。

.thumbnail{
  position: relative;
}
.yourtext{
  position: absolute;
  top: 10px;
  left: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
    <div class="yourtext">Your date and month</div>
    <img src="https://unsplash.it/g/500/300?image=24" alt="...">
    <div class="caption">
        <a href="#">
            <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
        </a>
        <div class="row row-tags">
            <a href="#"><span class="label label-primary">JavaScript</span></a>
            <a href="#"><span class="label label-primary">JavaScript</span></a>
            <a href="#"><span class="label label-primary">JavaScript</span></a>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
    <div class="yourtext">Your date and month</div>
    <img src="https://unsplash.it/g/500/300?image=24" alt="...">
    <div class="caption">
        <a href="#">
            <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
        </a>
        <div class="row row-tags">
            <a href="#"><span class="label label-primary">JavaScript</span></a>
            <a href="#"><span class="label label-primary">JavaScript</span></a>
            <a href="#"><span class="label label-primary">JavaScript</span></a>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
    <div class="yourtext">Your date and month</div>
    <img src="https://unsplash.it/g/500/300?image=24" alt="...">
    <div class="caption">
        <a href="#">
            <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
        </a>
        <div class="row row-tags">
            <a href="#"><span class="label label-primary">JavaScript</span></a>
            <a href="#"><span class="label label-primary">JavaScript</span></a>
            <a href="#"><span class="label label-primary">JavaScript</span></a>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </div>
</div>
</div>
</div>

Answer 3

使用这个

 .thumbnail{
      position:relative;
    }

    .text{
      position:absolute;
      top:10px;
      left:10px;
    }

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.thumbnail{
  position:relative;
}

.text{
  position:absolute;
  top:10px;
  left:10px;
}

<div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                <div class="text">
                09/10/2017
                </div>
                    <img src="https://unsplash.it/g/500/300?image=24" alt="...">
                    <div class="caption">
                        <a href="#">
                            <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
                        </a>
                        <div class="row row-tags">
                            <a href="#"><span class="label label-primary">JavaScript</span></a>
                            <a href="#"><span class="label label-primary">JavaScript</span></a>
                            <a href="#"><span class="label label-primary">JavaScript</span></a>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    </div>
                </div>
            </div>

Answer 4

试试这个：

.thumbnail {
    position: relative;
}

img {
    width: 100%;
}

.date {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FFF;
}

.thumbnail {
    position: relative;
}

img {
    width: 100%;
}

.date {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #FFF;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-sm-6 col-md-4 ">
    <div class="thumbnail">
        <img src="https://unsplash.it/g/500/300?image=24" alt="...">
        <span class="date">09-Oct-2017</span>
        <div class="caption">
            <a href="#">
                <h4>JavaScript: Novice to Ninja, 2nd Edition</h4>
            </a>
            <div class="row row-tags">
                <a href="#"><span class="label label-primary">JavaScript</span></a>
                <a href="#"><span class="label label-primary">JavaScript</span></a>
                <a href="#"><span class="label label-primary">JavaScript</span></a>
            </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
</div>