Как установить флажок на изображении выше серого или серого фона? - PullRequest
Новая
       13

Как установить флажок на изображении выше серого или серого фона?

1 голос
/ 03 апреля 2019

Подскажите, пожалуйста, как установить флажок на изображении выше и иметь сероватый или серый фон на изображении пользователя. Вот мой код 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>

см. Вот так enter image description here

enter image description here

Ответы [ 3 ]

1 голос
/ 03 апреля 2019

Это то, что вы хотите? 

.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 имеет относительное положение.

Настройте верхнее и левое значения в соответствии с вашими потребностями.

1 голос
/ 03 апреля 2019

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;
}
0 голосов
/ 03 апреля 2019

Попробуйте добавить 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 в другом файле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...