it-swarm.com.de

Verwenden Sie CSS-Farbverlauf über Hintergrundbild

Ich habe versucht, einen linearen Farbverlauf über meinem Hintergrundbild zu verwenden, um einen Überblendungseffekt auf der Unterseite meines Hintergrunds von schwarz nach transparent zu erzielen, kann ihn jedoch scheinbar nicht anzeigen.

Ich habe hier andere Fälle und Beispiele gelesen, aber keine davon funktioniert für mich. Ich kann nur den Farbverlauf oder das Bild sehen, aber nicht beide. Hier ist der Link

Klicken Sie einfach auf das erste Logo und ignorieren Sie diesen Effekt. Was ich versuche, befindet sich danach im gesamten Textkörper der Site.

Dies ist mein CSS-Code:

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}
63
Pam

Ok, ich habe es gelöst, indem ich die URL für das Hintergrundbild hinzugefügt habe am Ende der Zeile.

Hier ist mein Arbeitscode:

.css {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;

}
<div class="css"></div>
121
Pam
body {
    margin: 0;
    padding: 0;
    background: url('img/background.jpg') repeat;
}

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

BITTE BEACHTEN SIE: Dies funktioniert nur mit Webkit, sodass es nur in Webkit-Browsern funktioniert.

versuchen :

-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)
11
Ma9ic
#multiple-background{
        box-sizing: border-box;
        width: 123px;
        height: 30px;
        font-size: 12pt;
        border-radius: 7px;             
        background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425);
        background-repeat: no-repeat, repeat;
        background-position: 5px center, 0px 0px;
    background-size: 18px 18px, 100% 100%;
        color: white;   
        border: 1px solid #e4f6df;
        box-shadow: .25px .25px .5px .5px black;
        padding: 3px 10px 0px 5px;
        text-align: right;
        }
<div id="multiple-background"> Completed </div>
4
Mohammad Faizan

Die akzeptierte Antwort funktioniert gut. Der Vollständigkeit halber (und weil ich die Kürze mag), wollte ich die Vorgehensweise mit dem Kompass (SCSS/SASS) teilen:

body{
  $colorStart: rgba(0,0,0,0);
  $colorEnd: rgba(0,0,0,0.8);
  @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg"));
}
3