CSS - Linear-gradient Transparenz auf beiden Seiten des Bildes

tl;dr

Gibt es eine Möglichkeit, Transparenz hinzufügen, Bilder in CSS mit -webkit-linear-gradient auf der linken und rechten Seite des Bildes?

Lange Version

Ich ein Bild hinzufügen möchten Transparenz - mit reinem CSS - auf beiden Seite, es vermeiden, mit einem Bildbearbeitungsprogramm wie Photoshop, Gimp, etc. Ich habe versucht, zu verwenden -webkit-linear-gradient aber es nutzt rgba () - Funktion zu definieren, die Farbe hält.

Also das snippet

height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

tut:

CSS - Linear-gradient Transparenz auf beiden Seiten des Bildes

In diesem Beispiel wird der Letzte parameter in der rgba() definiert die Transparenz der Farbe. So weit So gut. Wenn ich right im -webkit-linear-gradient dem obigen Bild würde zeigen das Gegenteil. (Sie nicht sagen?!)

Will ich irgendwie verschmelzen die beiden, und erstellen einen Verlauf, der geht, um transparent auf beiden Seiten. Nur nicht mit der Steigung. Mit einem Bild.

Ich habe auch versucht, zu arbeiten, um mit box-shadow und radial-gradient aber ich konnte nicht es herausfinden.

Gibt es überhaupt eine Möglichkeit zum hinzufügen von Transparenz auf der linken und rechten Seite des Bildes mit nur CSS?

EDIT:

Beispiel:
CSS - Linear-gradient Transparenz auf beiden Seiten des Bildes

  • Nicht sicher bin ich mir ziemlich bekommen es... willst du einfach nur drei Farbmarkierungen?
  • NÖ, ich will ein Bild fading auf beiden Seiten der Transparenz.
  • Nie Verstand ich es zu bekommen. Side note, lineare Gradienten sind standardisiert und verwenden eine andere syntax als die, die Sie zurzeit verwenden.
  • Ich fügte hinzu, ein Beispiel oben. Wenn nicht mit -webkit-linear-gradient, dann ist es eine Möglichkeit, es zu tun?
InformationsquelleAutor balintpekker | 2015-02-09
  1. 19

    Könnten Sie ein wrapper-div und verwenden Sie dann die Farbe hält:

    CSS:

    div {
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}

    HTML:

    <div>
  <img src="http://placekitten.com/g/300/300" alt="" />
</div>

    Ressourcen

    • Genial. Danke für Eure Hilfe!
    • kein problem, froh, dass ich helfen konnte
    InformationsquelleAutor jbutler483
  2. 0

    CSS:

    .image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }

    HTML:

    <div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

    Einen Weg habe ich gefunden, dies zu tun ist die Verwendung von pseudo-Klassen und stapeln Sie auf der jeweils anderen. Stellen Sie sicher, dass die Bild-container ist relativ positioniert und es sollte für Sie arbeiten (siehe Beispiel).

    InformationsquelleAutor JimRush
Schreibe einen Kommentar