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

时间：2017-10-09 13:09:39

标签： html css twitter-bootstrap

我使用thumbnail创建了bootstrap，看起来像enter image description here

这是代码

<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添加位置并插入图像会弄乱图像位置。

4 个答案:

答案 0 :(得分：2)

您可以在position: absolute上使用txtDiv。检查下面更新的代码段。

.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>

答案 1 :(得分：1)

希望这段代码可以帮助你。

.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>

答案 2 :(得分：0)

使用此

 .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>

答案 3 :(得分：0)

试试这个：

.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>

相关问题
最新问题