Как добавить линейный градиент к изображениям в слайдере Materializecss - PullRequest
Новая
       15

Как добавить линейный градиент к изображениям в слайдере Materializecss

0 голосов
/ 05 мая 2019

Я кодирую сайт с помощью фреймворка CSS "Materializecss", но я борюсь с ползунком.Я хотел бы иметь линейный градиент над каждым изображением на слайдере, чтобы текст на изображении мог читаться лучше (это линейный градиент, я хочу линейный градиент (rgba (0, 0, 0, 0.5), rgba (0, 0, 0, 0.5))) но я не могу понять, как это сделать

PS Я знаю, что могу сделать это, связав изображение в CSS, как я сделал это для героя на другой странице, ноЯ хочу, чтобы это было связано в теге, как сейчас.У кого-нибудь есть решение?

Вот код: 

<div class="slider">
  <ul class="slides">
    <li>
  <img src="images/tema.jpg">
  <div class="caption center">
    <h2>Chi siamo?</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti1.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>Progetti</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti2.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>Foto</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti3.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>Abbigliamento</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti4.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>Contatti</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti1.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>News</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti2.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>Cogestione</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>
<li>
  <img src="images/studenti3.jpg"> <!-- random image -->
  <div class="caption center">
    <h2>Login</h2>
    <h5 class="light grey-text text-lighten-3">Per saperne di più</h5>
    <a class="waves-effect waves-light btn">clicca qui</a>
  </div>
</li>

1 Ответ

0 голосов
/ 05 мая 2019

Попробуйте сделать это: 

.your image {
    max-width: 100%;  //or what you want
    width: 800px;  //or what you want
    margin: auto;  //or what you want
}

.your image::after {
    display: block;
    position: relative;
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
    margin-top: -150px;  //or what you want
    height: 150px;  //or what you want
    width: 100%;  //or what you want
    content: '';
}
...