Pytanie Zmień styl pseudo elementów w angular2


Czy można zmienić styl pseudo elementów za pomocą [style] lub [ngStyle] w angular2?

w celu uzyskania efektu rozmycia na div działa jak nakładka i powinienem ustawić obraz w tle na pseudo element.

Próbowałem czegoś takiego

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">

to nie zadziałało. Próbowałem też tego

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">

14
2018-02-08 21:55


pochodzenie




Odpowiedzi:


Nie, to niemożliwe. W rzeczywistości nie jest to kwestia kątowa: pseudoelementy nie są częścią drzewa DOM i dlatego nie ujawniają żadnego interfejsu DOM API, który można wykorzystać do interakcji z nimi.

Zwykłe podejście do programowania pseudoelementów jest pośrednie: dodajesz / usuwasz / zmieniasz klasę, a w CSS ta klasa ma wpływ na odpowiedni pseudoelement. W twoim przypadku możesz mieć jeszcze jedną klasę, która zmieni wymagany styl:

.blur:before {/* some styles */}
.blur.background:before {/* set background */}

Teraz wszystko, co musisz zrobić, to przełączać .background klasa na elemencie, gdy potrzebujesz before pseudoelement, aby uzyskać tło. Możesz użyć NgClass, na przykład.


13
2018-02-08 22:38



Muszę ustawić background-image dynamicznie dla listy wpisów, więc nie będzie działać w ten sposób, zamiast tego ustawię div.blurtło i odziedziczy go :before, Dziękuję za Twoją odpowiedź. - Murhaf Sousli
Nie można ustawić stylu pseudoelementu za pomocą javascript. Tak więc w tym przypadku możesz użyć prawdziwego elementu i ustawić jego tło. Po prostu udawaj, że to pseudo. - dfsq


Możesz osiągnąć to, czego potrzebujesz, używając zmiennych CSS.

W swoim arkuszu stylów możesz ustawić obraz tła w ten sposób:

.featured-image:after      { content: '';
                             background-image: var(--featured-image); }

Następnie można programowo ustawić tę zmienną na tym samym elemencie lub na tym samym w drzewie DOM:

<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}">

Więcej o zmiennych CSS tutaj: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Pamiętaj, że obsługa przeglądarki nie jest jeszcze ukończona.

Pamiętaj też, że musisz odkażać adres URL / styl za pomocą sanitizer.bypassSecurityTrustResourceUrl(path) lub sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):


10
2018-06-18 22:20



Dostaję źródło obrazu z odpowiedzi http, więc nie mogę ustawić tła z mojego arkusza stylów - Murhaf Sousli
[attr.style]="sanitizer.bypassSecurityTrustStyle('--custom:' + value)" pomogło mi - slowkot