Question

我正在使用CSS框架“ Materializecss”对网站进行编码，但是我在使用滑块时遇到了麻烦。我想在滑块上的每个图像上都有一个线性渐变，以便可以更好地读取图像上的文字（这是我想要的线性渐变，linear-gradient（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>

Answer 1

尝试执行此操作：

.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: '';
}

如何在Materializecss的滑块中向图像添加线性渐变

1 个答案: