问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在引导程序中将图像放在图像上；

社区维基
1
新手上路，请多包涵

我需要将一个图像放在另一个图像上。

这是我的代码：

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

它是这样的：

在此处输入图像描述

我的实际需要是图像上的加号，如下所示：

在此处输入图像描述

原文由 Group 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssbootstrap
阅读 218
2 个回答
得票最新
社区维基
1
✓ 已被采纳

好吧，您可能需要使用 "position: absolute" 定位第二张图片，然后通过设置将其居中对齐到另一张图片上

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

不要忘记容器需要 position: relative 来包含 "fixed" 图像。

原文由 Nicklas Ridewing 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

试试这个

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>

原文由 anurag 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题