Frage Wie kombiniere ich ein Hintergrundbild und einen CSS3-Farbverlauf für dasselbe Element?


Wie benutze ich CSS3 Gradienten für meine background-color und dann a background-image eine Art lichtdurchlässige Textur auftragen?


1063
2018-03-23 22:30


Ursprung


Antworten:


Mehrere Hintergründe!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Diese 2 Zeilen sind der Ausweichmodus für alle Browser, die keine Farbverläufe haben.  Hinweise zum Stapeln von Bildern finden Sie unter IE <9.

  • Zeile 1 legt eine flache Hintergrundfarbe fest.
  • Zeile 2 legt das Hintergrundbild-Fallback fest.

Die letzte Zeile legt ein Hintergrundbild und einen Farbverlauf für Browser fest, die damit umgehen können.

  • Zeile 3 ist für alle relativ modernen Browser.

Fast alle aktuellen Browser unterstützen mehrere Hintergrundbilder und CSS Hintergründe. Sehen http://caniuse.com/#feat=css-gradienten für die Browserunterstützung. Für einen guten Beitrag, warum Sie nicht mehrere Browser-Präfixe benötigen, siehe http://codepen.io/thebabydino/full/pjxVWp/

Schichtstapel

Es sollte beachtet werden, dass das erste definierte Bild im Stapel ganz oben liegt. In diesem Fall befindet sich das Bild oben auf dem Farbverlauf.

Weitere Informationen zur Hintergrundschichtung finden Sie unter http://www.w3.org/TR/css3-background/#layering.

NUR Stapeln von Bildern (keine Farbverläufe in der Deklaration) Für IE <9

IE9 und höher können Bilder auf die gleiche Weise stapeln. Sie könnten dies verwenden, um ein Gradientenbild für ie9 zu erstellen, obwohl ich das persönlich nicht tun würde. Bei Verwendung von nur Bildern jedoch zu beachten, zB <9 ignoriert die Fallback-Anweisung und zeigt kein Bild an. Dies geschieht nicht, wenn ein Farbverlauf enthalten ist. Um ein einzelnes Fallback-Bild in diesem Fall zu verwenden, schlage ich vor, Paul Irishs wundervolles zu verwenden Bedingtes HTML-Element zusammen mit Ihrem Fallback-Code:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Hintergrundposition, Größe usw.

Andere Eigenschaften, die für ein einzelnes Bild gelten, können ebenfalls durch Kommas getrennt sein. Wenn nur ein Wert angegeben wird, wird dieser auf alle gestapelten Bilder einschließlich des Farbverlaufs angewendet. background-size: 40px; schränkt sowohl das Bild als auch den Farbverlauf auf 40 Pixel Höhe und Breite ein. Jedoch verwenden background-size: 40px, cover; macht das Bild 40px und der Farbverlauf wird das Element abdecken. Um eine Einstellung nur auf ein Bild anzuwenden, legen Sie die Standardeinstellung für das andere Bild fest: background-position: 50%, 0 0; oder für Browser, die es unterstützen benutzen initial: background-position: 50%, initial;

Sie können auch die Hintergrundkurzschrift verwenden, jedoch werden dadurch die Rückfallfarbe und das Bild entfernt.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Gleiches gilt für Hintergrund-Position, Hintergrund-Wiederholung usw.


1327
2018-03-30 16:59



Wenn Sie auch festlegen möchten Hintergrundposition für Ihr Bild, als Sie das verwenden können:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

oder Sie können auch ein LESS Mixin (Bootstrap Style) erstellen:

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

75
2017-11-24 16:02



Eine Sache zu realisieren ist, dass das erste definierte Hintergrundbild zuoberst im Stapel ist. Das zuletzt definierte Bild wird unten liegen. Das heißt, um einen Hintergrundgradienten hinter einem Bild zu haben, benötigen Sie:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Sie können auch Hintergrundpositionen und Hintergrundgröße für die Bilder definieren. Ich habe einen Blogeintrag über einige interessante Dinge zusammengestellt, mit denen Sie arbeiten können CSS3-Verläufe


39
2017-12-31 23:51



Sie könnten einfach tippen:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);


16
2017-12-21 18:35



Ich hatte eine Implementierung, bei der ich diese Technik einen Schritt weiter gehen musste und wollte meine Arbeit skizzieren. Der folgende Code macht dasselbe, verwendet aber SASS, Bourbon und ein Bild-Sprite.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS und Bourbon kümmern sich um den Cross-Browser-Code, und jetzt muss ich nur noch die Sprite-Position pro Button deklarieren. Es ist einfach, diesen Principal für die Schaltflächen active und hover states zu erweitern.


13
2017-10-10 17:08



meine Lösung:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

13
2018-03-15 12:39



Ich verwende immer den folgenden Code, damit es funktioniert. Es gibt einige Hinweise:

  1. Wenn Sie die Bild-URL vor dem Farbverlauf platzieren, wird dieses Bild angezeigt über der Verlauf wie erwartet.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. Wenn Sie den Farbverlauf vor der Bild-URL platzieren, wird dieses Bild angezeigt unter der Gradient.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

Diese Technik ist genauso wie wir mehrere Hintergrundbilder wie beschrieben haben Hier


8
2017-10-04 07:21



Ich habe ein Beispiel mit enjoycss gemacht

enter image description here

http://enjoycss.com/5q#background

in enjoycss editor kannst du beliebig viele Hintergründe kombinieren, linear, sich wiederholend-linear, radial, wiederholend-radial, Bilder, Farben

Sie passen Ihre Hintergründe mit GUI an und es generiert automatisch den Code

Code ist hier http://enjoycss.com/5q/code/0/background#background


5
2018-01-12 15:24



Ich habe versucht, das Gleiche zu tun. Während Hintergrundfarbe und Hintergrundbild auf separaten Ebenen innerhalb eines Objekts existieren - also koexistieren können - scheinen CSS-Gradienten die Hintergrundbild-Ebene zu kooptieren.

Von dem, was ich sagen kann, scheint border-image eine breitere Unterstützung als mehrere Hintergründe zu haben, also ist das vielleicht ein alternativer Ansatz.

http://articles.sitepoint.com/article/css3-border-images

UPDATE: Ein bisschen mehr Forschung. Scheint, Petra Gregorova hat hier etwas zu tun -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html


2
2018-02-06 04:20



Hier ist ein MIXIN, den ich erstellt habe, um alles zu handhaben, was Leute gerne benutzen würden:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Dies kann wie folgt verwendet werden:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Ich hoffe, ihr findet das hilfreich.

Kredit an @Gidgidonihah für das Finden der Anfangslösung.


2
2017-12-11 10:33



Wenn Sie beim Herunterladen von Hintergrundbildern merkwürdige Fehler haben, verwenden Sie den W3C Link Checker: https://validator.w3.org/checklink

Hier sind moderne Mixins, die ich benutze (Credits: PSA: Verwenden Sie keine Gradientengeneratoren):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

2
2018-02-25 17:18