Wie fügt man einen linearen Farbverlauf in einem Bild mit CSS hinzu?

Question

Ich habe diesen Code-Schnipsel. Ich möchte meinem Bild mit Css einen linearen Farbverlauf hinzufügen. Aber ich habe diesen Code bisher probiert, aber der Linear-Gradient fügt nichts hinzu. Muss ich Position: absolut oder relativ verwenden, um meinen linearen Farbverlauf innerhalb meines Bildes zu überlagern? bitte hilfe.

Ich benutze dieses Bild

Bitte das Bild auf dem Image-Tag, weil jsfiddle keine Option haben lokale Dateien hinzufügen und hochladen. Entschuldigen Sie die Unannehmlichkeiten.

.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

Eine Möglichkeit, das zu tun, ist ein Pseudoelement zu verwenden, wie ::after.

Zuerst habe ich ein Pseudoelement auf das slideshow Element für die Gradienten, und es positionierte position: absolute (und position: relative am slideshow) verwendet wird, dann durch verschiedene z-index auf der pseudo Einstellung und die slogan es zwischen dem Bild überlagerte und Text .

.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

Als Alternative Option, stattdessen ein img-Tag verwenden, können Sie das Bild als Hintergrund für Ihre Diashow div platzieren. CSS-Hintergründe können sozusagen mehrere Ebenen haben, indem mehrere Hintergründe übereinander gestapelt werden. Ich schlage vor, Ihr Image-Tag zu entfernen und mit dem Code unten:

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