logo标签列表

如何在Bootstrap中将图片放置在另一张图片上方？

htmlcsstwitter-bootstrap
7

我需要在一张图片上放置另一张图片。

这是我的代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class = "row text-center" style="">
      <div class="col-xs-6 text-center" style="background-color:none; margin-top:10px;">
        <img src="1.jpg" width="250" height="250">
        <img src="plus.png" width="50px" height="50px">
      </div>
    </div>
  </body>
</html>

它看起来像这样：

enter image description here

我实际需要的是图片上方的加号，像这样：

enter image description here

3个回答
10

试试这个

CSS：

.product-holder {
    position: relative;
    display: block;
}

.plus-image {
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -25px;
    margin-left: -25px;
}

HTML

<div class = "row text-center" style="">
    <div class="col-xs-6 text-center" style="background-color:none; margin-top:10px;">
        <div class='product-holder'>
            <img src="1.jpg" width="250" height="250" class='product-image'>
            <img src="plus.png" width="50px" height="50px" class='plus-image'>
        </div>
    </div>
</div>
6

很可能需要使用"position: absolute"对第二张图片进行定位，然后通过设置来将其居中对齐于另一张图片上。

 margin-top: 50%;
 margin-left: 50%;
 transform: translate(-50%,-50%);

不要忘记容器需要具有 position: relative，以容纳 "fixed" 图像。

1
给你的图标添加position:absolute属性... 并使用CSS将其移动到图像上。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接