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

Question

我有这段代码。我想用Css为我的图像添加一个线性渐变。但到目前为止，我尝试了这个代码，但线性渐变没有添加任何东西。我必须使用位置：绝对或相对覆盖我的图像内的线性渐变？请帮忙。

我用这个形象

请将此图像添加到图像标记，因为的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元件上的伪元件，和（在slideshow和position: relative）使用position: absolute，然后通过在伪和slogan设置不同z-index定位它，图像和文本之间分层它。

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

<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 2

作为另一种选择，而不是使用img标签可以放置图像作为幻灯片DIV的背景。可以说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>