Question

能否请您告诉我如何在用户图像上方显示复选框，并在用户图像上显示灰色背景或灰色背景这是我的代码 https://jsbin.com/wikudiqeye/2/edit?html,css,output

<img class="img" src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Abhishek_Pujari_User_Image.jpeg/1600px-Abhishek_Pujari_User_Image.jpeg
">
    </div>

    <div style="float: left;width: 20%;
                                font-size: 5rem;
                                color: green;
                                 position: absolute;
                                text-align: center;">
        <span class="glyphicon glyphicon-ok"></span>
    </div>

看到这样

Answer 1

HTML：

<h1>Hello, world!</h1> 
<div id="container">
<img class="img"  src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Abhishek_Pujari_User_Image.jpeg/1600px-Abhishek_Pujari_User_Image.jpeg">
 <span id="icon" class="glyphicon glyphicon-ok"></span>
 </div>

CSS：

.img {
 width: 200px;
 position: absolute;
}
#container {
 position: relative;
}

#icon {
 position: absolute;
 font-size: 5rem;
 color: green;
 top: 30px;
 left: 145px;
}

Answer 2

这是您想要的吗？

.img {
  width: 200px;
  opacity: 0.5
}

.image-container {
  position: relative;
  text-align: center;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 5rem;
  color: green;
  transform: translate(-50%, -50%);
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<h1>Hello, world!</h1>

<div class="image-container">
  <img class="img" src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Abhishek_Pujari_User_Image.jpeg/1600px-Abhishek_Pujari_User_Image.jpeg">
  <div class="icon"><span class="glyphicon glyphicon-ok"></span></div>

</div>

我们使用绝对定位使图标在图像上居中。此外，父div也有相对位置。

根据需要调整顶部和左侧的值。

Answer 3

尝试像这样将top: value%和left: value%添加到您的复选框样式中。

.img {
  width:200px;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
      <div style="position: relative;">       
    <div>
   <img class="img" src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Abhishek_Pujari_User_Image.jpeg/1600px-Abhishek_Pujari_User_Image.jpeg
">
    </div>
                    
    <div style="width: 20%; 							font-size: 5rem;
color: green;position: absolute;
  top: 20%;
  left: 20%;">
        <span class="glyphicon glyphicon-ok"></span>
    </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

此外，您应该将CSS样式分为另一个文件。

如何在上述用户图像的灰色背景或褪色背景上显示复选框？

3 个答案: