Question

我有这个代码段。我想使用Css为我的图像添加线性渐变。但到目前为止我尝试了这个代码，但线性渐变并没有添加任何东西。我是否必须使用position：absolute或relative来覆盖我的图像中的线性渐变？请帮忙。

我用这个

请将此图片添加到图片代码，因为jsfiddle没有添加本地文件并上传的选项。抱歉给你带来不便。

.container { width: 1000px;padding: 0;margin: 0 auto;}
.slideshow {position: relative; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.8));}
.slideshow img {border: 3px solid #153f27;border-radius: 5px;-webkit-box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);-moz-box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);}
.slogan {position: absolute; top: 30px; padding: 25px 20px;}
.slogan h1 {font: bold 30px Arial;color: #fff;}
.slogan p {width: 490px;font: bold 17px Arial;color: #fff;padding: 4px 0px;}

<div id="banner">
  <div class="container">
    <div class="slideshow">
      <img src="https://i.stack.imgur.com/KOi78.jpg" alt="Lorem Ipsum">
      <div class="slogan">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

一种方法是使用伪元素，如::after。

首先，我在渐变的slideshow元素上添加了一个伪元素，然后使用position: absolute（和position: relative上的slideshow）对其进行定位，然后设置不同的伪z-index和slogan，在图片和文字之间分层。

＆＃13;

.container {
  width: 1000px;
  padding: 0;
  margin: 0 auto;
}

.slideshow {
  position: relative;
}

.slideshow::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
  z-index: 1;
}

.slideshow img {
  border: 3px solid #153f27;
  border-radius: 5px;
  -webkit-box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
  -moz-box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
  box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
}

.slogan {
  position: absolute;
  top: 30px;
  padding: 25px 20px;
  z-index: 2;
}

.slogan h1 {
  font: bold 30px Arial;
  color: #fff;
}

.slogan p {
  width: 490px;
  font: bold 17px Arial;
  color: #fff;
  padding: 4px 0px;
}

＆＃13;

<div id="banner">
  <div class="container">
    <div class="slideshow">
      <img src="https://i.stack.imgur.com/KOi78.jpg" alt="Lorem Ipsum">
      <div class="slogan">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

作为替代选项，您可以将图片作为幻灯片div的背景，而不是使用img标记。 CSS背景可以有多个层，可以这么说，通过定义多个背景，它们堆叠在一起。我建议删除您的图片代码并使用以下代码：

.container {
  width: 1000px;
  padding: 0;
  margin: 0 auto;
}

.slideshow {
  position: relative;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('https://i.stack.imgur.com/KOi78.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  height: 400px;
  /*CSS from Img tag not applied to slideshow*/
  border: 3px solid #153f27;
  border-radius: 5px;
  box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
}

.slideshow img {
  border: 3px solid #153f27;
  border-radius: 5px;
  -webkit-box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
  -moz-box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
  box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
}

.slogan {
  position: absolute;
  top: 30px;
  padding: 25px 20px;
  z-index: 2;
}

.slogan h1 {
  font: bold 30px Arial;
  color: #fff;
}

.slogan p {
  width: 490px;
  font: bold 17px Arial;
  color: #fff;
  padding: 4px 0px;
}

<div id="banner">
  <div class="container">
    <div class="slideshow">
      <div class="slogan">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

如何使用CSS在图像中添加线性渐变？

2 个答案: