如何使用CSS在圖像中添加線性漸變？

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 ）對其進行了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

作為一種替代選擇，您可以將圖像放置為幻燈片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>