Bootstrap 4 светлого цвета Overlay в верхней части изображения, чтобы текст выделялся / видеть лучше - PullRequest
Новая
       10

Bootstrap 4 светлого цвета Overlay в верхней части изображения, чтобы текст выделялся / видеть лучше

0 голосов
/ 15 января 2019

Итак, я пытаюсь нанести очень светлый цвет поверх img или родительского div изображения, чтобы текст без проблем отображался независимо от того, что это изображение - светлое или темное. Как вы можете видеть, я использую класс начальной загрузки, чтобы иметь текст поверх изображения. Пока это моя попытка, но из-за этой непрозрачности текст и изображение становятся темнее, я хотел, чтобы изображение было тусклее / светлее, чтобы текст был хорошо виден. Какое хорошее решение здесь. Я видел людей, использующих прозрачный фоновый цвет в качестве изображения и накладывающих его на CSS. Я не знаю, хороший ли это подход 

.dnow-regionsContent {
    background-color: SlateGray;
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.dnow-regionsContent .card-img-overlay img {
    max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">


   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">
         <div class="card bg-dark text-white">
            <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
            <div class="card-img-overlay d-flex align-items-center container">
               <div class="row  mb-5">
                  <div class=" col-sm-12 text-content">
                     <h2 class="card-title ">
                        Canada
                     </h2>
                     <button class="btn btn-primary">
                        Viewl all Location
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

</body>

</html>

1 Ответ

0 голосов
/ 15 января 2019

Я не знаю, понимаю ли я вопрос, но из того, что я понимаю, вы хотите применить оверлейный цвет поверх изображения, чтобы изображение стало более тусклым. Если это решение может помочь вам создать новый div 

<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="overlay-div"></div> <!-- the new div -->
<div class="card-img-overlay d-flex align-items-center container">

и применить некоторые стили CSS 

.overlay-div{
   height:100%;
   width: 100%;
   position:absolute;
   background-color:#000;
   opacity:.7;
}

есть файл пера, который вы можете попробовать img overlay color

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

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

...