Kann ich CSS (3) Filter NUR auf Bildbereiche anwenden?

ich ein Vollbild-Hintergrundbild hatKann ich CSS (3) Filter NUR auf Bildbereiche anwenden?

.bg { 
    left: 0; 
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 0; 
    z-index: -1; 
}

und will einen CSS3-Filter anwenden, wie ich persönlich würde einen Unschärfe-Effekt zu verwenden, in der gleichen Position wie mein Körper

.container { 
    margin: 0 auto; 
    width: 1000px; 
}

eine hier Beispiel:

screenshot http://imageshack.us/a/img443/4976/j7qj.jpg

ich möchte Text über die unscharfen Container schreiben.

Quelle

2013-08-13 Maximilian Fuchs

einen div nehmen, Position gibt es und Opazität verwenden, um die Bildunschärfe – Hushme

@Hushme zu machen, die den Hintergrund, wenn auch nicht wirklich werden verwischen, verblasst nur die Farbe leicht. –

@Hushme Ja, danke. Ich habe das schon probiert, aber kannst du mir ein Beispiel zeigen wo der ** Text nicht (auch) unscharf ist **? –

http://jsfiddle.net/QvSng/6/

CSS

body { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed; 
    background-size: cover; 
} 
body:before { 
    left: 0; 
    right: 0; 
    margin-left:auto; 
    margin-right:auto; 
    content: ""; 
    position: absolute; 
    height: 100%; 
    width: 500px; 
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed; 
    background-size: cover; 
    z-index: -1; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
} 

div { 
    height: 100%; 
    width: 450px; 
    margin: 0 auto; 
}

Quelle

2013-08-13 16:35:50

@MaximilianFuchs LOL, du musst eine Antwort interpretieren. Sie fügen nur No-Repeat Center Center fixed und Hintergrundgröße hinzu: cover; zu meiner Antwort. Das war der erste nach zwei oder drei Minuten. http: // jsfiddle.net/QvSng/6/ –

Nun habe ich Ihren Beitrag erkannt und Ihre Antwort akzeptiert! :-) –

@MaximilianFuchs, ich weiß das zu schätzen. –

die Unschärfe-Effekt zu erhalten, verwenden filter: blur() (mit Lieferanten Präfixe). Die Unschärfe bezieht sich nur auf das Element selbst und nicht auf darunter liegende Objekte. Sie müssen also sowohl auf das Bild innerhalb der "Weichzeichner" -Box als auch im Hintergrund verweisen und background-position verwenden, um den Versatz so zu steuern, dass er richtig ausgerichtet ist .

.blur { 
    background-image: url('http://placekitten.com/400/400'); 
    background-position: center -100px; 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 
    filter: blur(10px); 
}

JSFiddle Demo

Quelle

2013-08-13 16:37:42 CheeseWarlock

JA! GROSS! Ich danke dir sehr! :) Ich akzeptiere, aber kannst du das bitte benutzen: background: url ("*") No-Repeat Centermitte behoben; -webkit-background-size: cover; -moz-Hintergrund-Größe: Abdeckung; -o-Hintergrund-Größe: Abdeckung; Hintergrundgröße: Cover; –

Ich glaube nicht, dass das gleiche Konzept für ein Hintergrundbild funktioniert, das auf den Bildschirm skaliert wird. Das war ähnlich wie das, was ich auch gemacht habe, aber ich habe es noch nicht mit einer nicht fixierten Bildgröße von bg arbeiten lassen. – andi

@andi: Ich habe es bereits versucht, es funktioniert, aber ich denke, Sie arbeiten besser;) –

können Sie tatsächlich Unschärfe für den before Selektor anwenden und erben background-image statt url zweimal anzugeben.

dass die HTML-Struktur macht deutlicher

JSFiddle Demo

Quelle

2016-09-27 11:40:38 Srinivasan

Kann ich CSS (3) Filter NUR auf Bildbereiche anwenden?

Antwort

Verwandte Themen