Czy mogę stosować filtry CSS (3) TYLKO w sekcjach obrazu?

Mam tło pełny obraz ekranuCzy mogę stosować filtry CSS (3) TYLKO w sekcjach obrazu?

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

i chcesz zastosować filtr CSS3, osobiście chciałbym użyć efektu rozmycia, w tym samym położeniu, jak moje ciało

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

Oto Przykład:

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

Chcę napisać tekst na niewyraźne pojemniku.

Źródło

2013-08-13 Maximilian Fuchs

wziąć div, umieścić go tam i używać przezroczystość, aby obraz rozmycia – Hushme

@Hushme że nie będzie naprawdę rozmycia tła choć tylko zanikanie kolor lekko. –

@ Hushme Yeah, dzięki. Próbowałem już tego, ale czy możesz pokazać mi przykład, w którym tekst ** nie jest (również) zamazany **? –

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; 
}

Źródło

2013-08-13 16:35:50

@MaximilianFuchs LOL, musisz zinterpretować odpowiedź. Dodajesz tylko nie powtarzaj centrum centrum stałe i rozmiar tła: okładka; do mojej odpowiedzi. To było pierwsze po 2 lub 3 minutach. http: // jsfiddle.net/QvSng/6/ –

Teraz rozpoznałem twój wpis i zaakceptowałem twoją odpowiedź! :-) –

@MaximilianFuchs, doceniam to. –

Aby uzyskać efekt rozmycia, użyj filter: blur() (z prefiksami dostawcy). Rozmycie dotyczy tylko samego elementu, a nie niczego pod nim, więc musisz odwołać się do obrazu w "polu zamazywania", jak również w tle, i użyć background-position, aby kontrolować przesunięcie, tak aby odpowiednio się ustawiły. .

.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

Źródło

2013-08-13 16:37:42 CheeseWarlock

YEAH! WSPANIAŁY! Dziękuję bardzo! :) Przyjmę, ale możesz użyć tego: background: url ("*") fixed-center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; rozmiar tła: okładka; –

Nie sądzę, by ta sama koncepcja zadziałała w przypadku obrazu tła skalowanego do rozmiaru ekranu. To było podobne do tego, co też zrobiłem, ale nie udało mi się go jeszcze wykorzystać do pracy z niezmienionym rozmiarem obrazu bg. – andi

@andi: już próbowałem, to działa, ale myślę, że pracujesz lepiej;) –

Można faktycznie zastosować rozmycie dla selektora before i dziedziczyć background-image zamiast określania URL dwa razy.

To czyni strukturę HTML bardziej widoczne

JSFiddle Demo

Źródło

2016-09-27 11:40:38 Srinivasan

Czy mogę stosować filtry CSS (3) TYLKO w sekcjach obrazu?

Odpowiedz

Powiązane problemy