Question

Sample Image如何将图像图标放置在Css和HTMl5的最后。请为此提供帮助，在此先感谢

这是我要进入的图像之外，但是我必须单击可点击的位置在右侧角落

.container img {

            max-width:5%;
            max-height:5% 
      }

    .positioner {

        position: absolute;

      }

      .icon {
        position: absolute;
        right: -70px;
        bottom: -20px;
        width: 32px;
        height: 32px;
        border-radius: 20px;
        border: 4px solid white;
        background: rgb(0, 195, 255);
      }

    <div class="container" style="margin-bottom: 10px;">

                    <img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
                        class="mr-3 d-none d-sm-block" alt="..." i class="fa fa-pencil fa-lg" style="color:white">

                        <div class="positioner">
                        <div class="icon">
                            <i class="fa fa-pencil fa-lg" style="color:white"></i>
                        </div>   
                        </div>
                    <div>

[供参考的样本图像]

  [1]: https://i.stack.imgur.com/cYzfh.png

Answer 1

<html>
<head>  
    <style>
    .container {
        position: relative;
        text-align: center;
        color: white;
    }

    .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;            
    }
    </style>
</head>
<body>
    <div class="container">
        <img src="rose-817431_960_720.jpg" alt="Snow" style="width:100%;">
        <img src="flat-blue-home-icon-4.png" class="bottom-right" id='icon'> 
    </div>

    <script>
        document.getElementById('icon').addEventListener('click',() => {
                        alert("CLICKED ON ICON");
        });             
    </script>

</body>

Answer 2

检查下面的代码

.container {
    margin-bottom: 10px;
}

.icon {
    position: absolute;
    bottom: 5px;
    right: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(0, 195, 255);
}

.profile-pic {
    position: relative;
    width: 56px;
    float: left;
}

.profile-desc {
    margin-left: 56px;
    height: 60px;
    /* padding: 10px; */
}

.profile-desc p {
    margin: 0;
    padding: 15px 10px 10px;
}

<div class="container" style="/* margin-bottom: 10px; */">

                    <div class="profile-pic">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." i="">

<div class="icon">
                            <i class="fa fa-pencil fa-lg" style="color:white"></i>
                        </div>

</div>
<div class="profile-desc">
    <p>dsds</p>
    </div>

                        
                    <div>
  
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }
  </script>


</div></div>

如何放置图像图标

2 个答案: