css - 在另一个图片上显示图片

This question already has answers here:

How to overlay images

                                    （11个答案）


                                12天前关闭。


我想在图片上方显示facebook.png。Facebook图标必须为float：在框架中为左，但它消失了。我不知道该怎么办。

错误显示“您的帖子似乎主要是代码；请添加一些详细信息。”，如果您需要更多详细信息，请让我知道必须添加什么内容

HTML：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container" style="margin-top: 20px; margin-bottom: 20px;">
    <div class="row panel">
        <div class="col-md-4 bg_blur ">
            <a href="#" class="follow_btn hidden-xs">Follow</a>
        </div>
        <div class="col-md-8  col-xs-12">
           <div>

           <img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail picture hidden-xs" style="z-index:2;" />
           <img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail visible-xs picture_mob" style="z-index:2;"/>

            <img src="https://cdn2.iconfinder.com/data/icons/entoni/32/entoni_facebook-16.png" style="z-index:1; float:right;"  />
           </div>



           <div class="header">
                <h1>Lorem Ipsum</h1>
                <h4>Web Developer</h4>
                <span>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span>
           </div>
        </div>
    </div>   

    <div class="row nav">    
        <div class="col-md-4"></div>
        <div class="col-md-8 col-xs-12" style="margin: 0px;padding: 0px;">
            <div class="col-md-4 col-xs-4 well"><i class="fa fa-weixin fa-lg"></i> 16</div>
            <div class="col-md-4 col-xs-4 well"><i class="fa fa-heart-o fa-lg"></i> 14</div>
            <div class="col-md-4 col-xs-4 well"><i class="fa fa-thumbs-o-up fa-lg"></i> 26</div>
        </div>
    </div>
</div>

CSS：

*{
    font-family: 'Open Sans', sans-serif;
}

.well {
    margin-top:-20px;
    background-color:#007FBD;
    border:2px solid #0077B2;
    text-align:center;
    cursor:pointer;
    font-size: 25px;
    padding: 15px;
    border-radius: 0px !important;
}

.well:hover {
    margin-top:-20px;
    background-color:#0077B2;
    border:2px solid #0077B2;
    text-align:center;
    cursor:pointer;
    font-size: 25px;
    padding: 15px;
    border-radius: 0px !important;
    border-bottom : 2px solid rgba(97, 203, 255, 0.65);
}

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #fff;
background-color: #F1F1F1;
}



.bg_blur
{
    background-image:url('http://data2.whicdn.com/images/139218968/large.jpg');
    height: 300px;
    background-size: cover;
}

.follow_btn {
    text-decoration: none;
    position: absolute;
    left: 35%;
    top: 42.5%;
    width: 35%;
    height: 15%;
    background-color: #007FBE;
    padding: 10px;
    padding-top: 6px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    border: 4px solid #007FBE;
}

.follow_btn:hover {
    text-decoration: none;
    position: absolute;
    left: 35%;
    top: 42.5%;
    width: 35%;
    height: 15%;
    background-color: #007FBE;
    padding: 10px;
    padding-top: 6px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    border: 4px solid rgba(255, 255, 255, 0.8);
}

.header{
    color : #808080;
    margin-left:10%;
    margin-top:70px;
}

.picture {
    height:150px;
    width:150px;
    position:absolute;
    top: 75px;
    left:-75px;
}

.picture a{

}

.picture_mob{
    position: absolute;
    width: 35%;
    left: 35%;
    bottom: 70%;
}

.btn-style{
    color: #fff;
    background-color: #007FBE;
    border-color: #adadad;
    width: 33.3%;
}

.btn-style:hover {
    color: #333;
    background-color: #3D5DE0;
    border-color: #adadad;
    width: 33.3%;

}


@media (max-width: 767px) {
    .header{
        text-align : center;
    }



    .nav{
        margin-top : 30px;
    }
}

最佳答案

您可以相对于图片容器应用位置，而对图标应用绝对位置。检查此代码段。

<div class="img-container">
             <img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail  hidden-xs" style="z-index:2;" />
             <div class="img-icon">
                <img src="https://cdn2.iconfinder.com/data/icons/entoni/32/entoni_facebook-16.png"  />
             </div>
           </div>


<style>
 .img-container{
            position:relative;
            width:100px;
            height:100px;
        }
        .img-icon{
            position:absolute;
            top: 5px;
            right:5px;
        }
        img{
            width: 100%;
        }
</sttyle>

关于css - 在另一个图片上显示图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59686376/

上一篇：html - CSS 渐变有条纹(不平滑)

下一篇：html - 在容器内 Bootstrap 一列，另一列扩展到屏幕边缘

相关文章：

html - 如何使图像适合特定的 div( Bootstrap )

jquery - <th> 边框在 IE 中不起作用

html - 找出边界来自哪里

css - 在 Safari 的 flexbox 中拉伸(stretch)图像

css - 如何设置 React-Select 组件的样式以获得以下结构？

javascript - Bootstrap Navbar 链接在 Ease-In 时被禁用

css - 在ng-repeat中动态创建类，并关联属性

javascript - polymer 变化自定义元素

ios - 直接使用 UIDocumentINteractionController 自动打开 WhatsApp，无需显示其他应用程序

javascript - Bootstrap col-md 问题