Как создать темное прозрачное наложение на изображение, на котором есть текст - PullRequest
Новая
       16

Как создать темное прозрачное наложение на изображение, на котором есть текст

0 голосов
/ 09 июня 2018

Я хочу создать оверлей, похожий на эту проверку, выберите концепцию

Ниже приведен фрагмент 

<html lang="en">

<head>
    <!-- Theme Made By www.w3schools.com - No Copyright -->
    <title>Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.3.7/js/bootstrap.min.js"></script>
 </head>

<body>
    <div class="col-sm-4 img-holder ">
   <img src="http://foundry.mediumra.re/img/chooser/agency-2.png" class="img-thumbnail imge" alt="agency-2" width="400" height="300">
      </div>
                
 </body>
 </html>

`

Ответы [ 3 ]

0 голосов
/ 09 июня 2018 

background: url('your-img.jpg') no-repeat, linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
background-blend-mode: overlay;
0 голосов
/ 09 июня 2018 

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  height: 0;
}

.container:hover .middle {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  top: 50%;
  left: 50%;
  height: 100%;
}

.text-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.text {
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  padding: 16px 32px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <p>Hover over the image to see the effect.</p>

  <div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text-wrapper">
        <div class="text">John Doe</div>
      </div>
    </div>
  </div>

</body>

</html>
0 голосов
/ 09 июня 2018

Установите задний фон текста как css следующим образом: 

background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)),url(<image_path>));

Здесь вы можете изменить значение альфа-канала rgba, чтобы соответственно изменить черный оттенок, и это путь к фоновому изображению.

Поскольку я передал два значения rgba в линейном градиенте, оставьте их одинаковыми.Если вам нужен равномерный фон.

Вот ваш рабочий код. 

<html lang="en">

<head>

    <title>Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.3.7/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Jua" rel="stylesheet">

    <style>
        .img-holder{
            background-image: url(http://foundry.mediumra.re/img/chooser/agency-2.png);
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
        }
        .img-holder:hover{
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)), url(http://foundry.mediumra.re/img/chooser/agency-2.png);
        }
        .img-holder p{            color:white;
            font-family: 'Jua', sans-serif;
            text-align: center;
            padding-top: 150px;
            font-size: 0px;
            transition-duration: .1s;
            
        }
        .img-holder:hover p{
           font-size: 50px;
        }
    </style>
 </head>

<body>
    <div class="col-sm-4 img-holder ">
        <p>I am Rajat</p>
      </div>         
 </body>
 </html>
...