• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Bild blur mit scharfem Border?

kristalljunge

Mitglied
Hey,

als Beispiel zeige ich vorab: http://www.mtv.com/news/

Dort ist im oberen Bereich ein Bild mit der Breite 100%, welches zwar mit blur? (?) unscharf gemacht wurde, allerdings sind die Ränder scharf. Ich hab schon versucht mit background-size über 100% zu gehen, und das Bild zu zentrieren, allerdings geht bei mir immer der Rand unscharf.

Kann mir jemand sagen, wie ich das umsetze wie bei diesem MTV Ding?
 
Werbung:
Kann mir jemand sagen, wie ich das umsetze wie bei diesem MTV Ding?
Und aus welchem Grund "fragst" du sowas nicht das Entwicklerwerkzeug deines Browsers? :(
CSS:
main.single.podcast .series-header::before {
   -webkit-filter: blur(.9375rem) brightness(65%);
   filter: blur(.9375rem) brightness(65%);
   background-position: center 25%;
   background-size: cover;
   bottom: 0;
   content: '';
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: -.9375rem;
   transform: scale(1.5);
   z-index: -1;
}
.series-header::before {
   background-image: url(http://imagesmtv-a.akamaihd.net/uri/mgid:ao:image:mtv:226442?width=800&height=450);
}
 
Werbung:
Magst du mir kurz erklären, wie man das Entwicklerwerkzeug fragt?
Wenn mir da mal nicht eine kleine Portion Sarkasmus kredenzt werden soll :p

Ansonsten, wenn's dich tatsächlich interessiert, über die "F12"-Taste wird in allen gängigen Browsern das DevTool gestartet... oder mit der rechten Maustaste das Kontextmenü öffnen, und je nach Browser den Eintrag "Untersuchen", "Element untersuchen", "..." wählen.

Wird das gewünschte Element beim Rechtsklick mit dem Mauszeiger "erwischt", öffnet sich der HTML-Code an der enstsprechenden Stelle, andernfalls im HTML zum ihm durchklicken. Ist das Element markiert (bspw. blau hinterlegt), führt listet der Tab "CSS" all seine Regeln auf.
 
Zurück
Oben