Machen Sie ein div transparent wie ein unscharfer Spiegel

Möchte ich ein div-hintergrund transparent, so habe ich diese css -

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

siehe auch diese Geige: http://jsfiddle.net/LUy3W/

Ich will nur das div zu sein, verwischt aber den Inhalt in das div ist auch unscharf. Wie man nur das hintergrund-div-Weichzeichner und stellen seine Inhalte sichtbar wie normale text?

irgendwelche Gedanken? bitte helfen Sie.

  • Verwenden Sie 2 getrennt div ' s
  • auch ich zwei divs problem weiterhin besteht, finden Sie auf dieser Geige. Ich würde schätzen, wenn Sie aktualisieren die fiddle und geben Sie mir eine Lösung. Vielen Dank 🙂
InformationsquelleAutor Raghavendra | 2013-12-02
  1. 10

    Kann der Inhalt nicht innerhalb der unscharfen div, so verwenden Sie ein Geschwister-element statt:

    HTML

    <div class="wrapper">
    <div class="content">my text</div>
</div>

    CSS

    .wrapper {
    height:400px;
    width:400px;
    position: relative;
}
.wrapper::before{
    width:100%;
    height:100%;
    position: absolute;
    background-image:url('https://i.imgur.com/iAgdW.jpg');
    background-size:cover;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}
.content{
    position: absolute;
    background-color:red;
}

    Demo-fiddle

    • Das hat mir geholfen. Danke.
    • Das Bild ist nicht mehr gehostet. 404 Nicht Gefunden
    • Moz ist nicht mehr erforderlich, ein Präfix.
    InformationsquelleAutor koala_dev
  2. 7

    Kann dies nun erreicht werden mit einer einzigen Zeile CSS durch die hintergrund-filter Eigenschaft (zusammen mit vielen anderen filter-Effekte), jedoch browser-Unterstützung zu der Zeit des Schreibens ist sehr schlecht, so stellen Sie sicher, um eine fallback-version für nicht unterstützte Browser sowie die -webkit- Präfix-version für jetzt.

    CSS:

    .wrapper {
  height: 400px;
  width: 400px;
  background-image: url('https://i.imgur.com/iAgdW.jpg');
  background-size: cover;
}

.inner {
  background-color: rgba(255, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 50px;
}

    HTML:

    <div class="wrapper">
  <div class="inner">my text</div>
</div>

    Die gerenderte Ausgabe in den unterstützten Browsern Aussehen wird:

    Machen Sie ein div transparent wie ein unscharfer Spiegel

    • Juli 2019, kann ich nur finden Safari desktop (und angeblich Safari iOS) zu unterstützen backdrop-filter. In Chrome und Opera, offenbar, Sie können aktiviert werden, unter ein experimentelles flag, das macht Sie unpraktisch. Kein Zeichen der die Kompatibilität mit Firefox.
    InformationsquelleAutor Mike
  3. 3

    Zum Beispiel.

    Den html -

    <div class="div-Blur">
    <div class="div-inside-blur">
    </div>
</div>

    Css

    .div-Blur {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px);
}

    Bearbeiten: versuchen Sie, diese plse

    .div-inside-blur { 
    background: blue; 
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px); 
 }
    • Siehe dieses Beispiel-fiddle jsfiddle.net/LUy3W, die ich verwendet zwei separate divs, aber keinen nutzen. alle Inhalte in div-Unschärfe verschwimmt.
    • jsfiddle.net/LUy3W/7 haben Sie einen Blick auf diese Geige..
    • immer noch den text im inneren div verschwommen ist
    • edit hat nicht funktioniert, haben ein Klo an diese jsfiddle.net/LUy3W/8
    • jsfiddle.net/LUy3W/11... Verschwommen in Chrome nicht in firefox... ist jetzt behoben...
    • Dieser Ansatz funktioniert nicht.

    InformationsquelleAutor CRABOLO
Schreibe einen Kommentar