Chcę użyć w mojej kątowej aplikacji Bennett bardzo "Efekty obrazu".

Na przykład jest to "efekt fotograficzny":

.photo-border-effect {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg), url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

[class$=-effect] img {
    vertical-align: top !important;
    margin: 0 !important;
    opacity: 0 !important;
}

/* CodePen Styles */
body {
    display: flex;
    height: 100vh;
}
div {
    margin: auto;
}
<div class="photo-border-effect">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg">
</div>

Ale muszę zmienić adresy URL w CSS ręcznie, niezbyt wygodne dla mojej aplikacji. Wiem, że mogę używać Zmienne CSS ale nie mogę znaleźć sposobu na aktualizację go od moich .ts bezpośrednio.

Jaki jest właściwy sposób aktualizacji zmiennej CSS w kanciasty?

Odpowiedź Mihir Dave może działać, ale mam przypadki z innymi background-image w tej samej klasie:

.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}
3
Toto Briac 25 luty 2021, 10:16

2 odpowiedzi

Najlepsza odpowiedź

Znalazłem szybki i łatwy sposób na to zrobić.

Używam zmiennych CSS i ustawić wartość z moich .ts przy użyciu DomSanitizer.

Oto a Stackblitz za pomocą tego rozwiązania zaimplementowanego.

3
Toto Briac 11 marzec 2021, 09:38

Możesz usunąć obraz tła z CSS i przekazać go z szablonu przy użyciu takiego kątowego.

<div [style.background-image]="'url('+YourUrlFromVariable+')'"></div>

Możesz także utworzyć metodę w pliku TS z logiką biznesową, aby zwrócić ciąg

<div [style.background-image]="getBackGroudImage()"></div>

TS

getHeroes(): string {
    // add cases here based on which you can return different strings to background urls
    return 'url('+YourUrlFromVariable+'), url(photo.jpg);';
}
0
Mihir Dave 25 luty 2021, 07:42