Na przykład, ma obraz z przezroczystym tłem:Czy HTML i CSS mogą tworzyć tylko nakładkę, która automatycznie ignoruje przezroczysty obszar na obrazie?
I chciałbym dodać szarą nakładkę (na przykład div lub płótnie ...) na nim:
Ale chcę nakładka ignoruje przezroczysty obszar na obrazie automatycznie:
Czy czysty HTML i CSS (na przykład przez div, canvas ...) to zrobić?
Wypróbuj tryb mieszania nakładki. Lub mnożyć! (nie obsługiwane przez IE lub EDGE, dzięki @Stilltorik)
.multiplied {
background-color: blue;
width:250px;
height: 100px;
margin-top: -100px;
mix-blend-mode: overlay;
}<div>
<img src='https://i.stack.imgur.com/4yUEW.png'/>
<div class='multiplied'></div>
</div>Ostrożnie, nie jest obsługiwany przez IE, ani na krawędzi: http://caniuse.com/#feat=css-mixblendmode – Stilltorik
Dość blisko, choć niestety żaden z dostępnych trybów mieszania dokładnie nie odtwarza pożądanego rezultatu. Jest to również bardzo zależne od obrazu i tła, w którym pojawia się obraz. Czy to wszystko jest ważne, zależy od osoby pytającej, choć jest oczywiste, że 18 innych użytkowników albo tego nie zauważyło, albo nie obchodzi, sądząc po komentarzach "+1" powyżej. – BoltClock
Dziękujemy za uwagę, że nie jest on obsługiwany przez Edge & IE. Edytuję. @BoltClock Tak. Właśnie dlatego zaoferowałem oba. Nie znam żadnego innego sposobu na uzyskanie takiego renderowania, więc zazwyczaj mam problem z trybem mieszania i kolorami, aby uzyskać odpowiednie wyniki i odpowiedni ostateczny kolor. Nie jest to idealny sposób, ale najprostszy bez zbyt wielu efektów ubocznych. – Carele
nieco hacky sposób:
.alpha-mask {
mask-image: url(https://i.stack.imgur.com/FwTzE.png);
-webkit-mask-image: url(https://i.stack.imgur.com/FwTzE.png);
mask-mode: alpha;
-webkit-mask-mode: alpha;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
.overlay {
background-color: #000;
position: absolute;
top: 120px;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}<article class="alpha-mask">
<img class="alpha-target" src="https://i.stack.imgur.com/FwTzE.png" />
<div class="overlay alpha-target">
</div>
</article>Bez znajomości pełnego przypadku użycia tego pytania, odpowiedziałbym: "Tak, ale kompatybilność z przeglądarką będzie uciążliwa".
Dwie pozostałe tutaj zamieszczone odpowiedzi pokazują sposoby, w jakie można to osiągnąć, jeśli kompatybilność nie jest problemem, ale uważam, że jest to coś, co można zrobić o wiele prościej za pomocą kreatywnego Photoshopa, a następnie warstwowych elementów.
Co bym zrobił:
Photoshop: Weź obraz podstawowy (co zakładam jest PNG, ponieważ ma kanał alfa) i wczytać go do programu Photoshop. Wybierz obszar, który chcesz zamaskować. edytuj> kopia scalona. Utwórz nową warstwę i edytuj> wklej. Zmień kolor tej nowej warstwy na kolor, który ma być maskowaną nakładką i dodaj efekt kanału alfa. Upewnij się, że domyślne tło jest wyłączone, a następnie zapisz nową warstwę jako plik PNG.
HTML:
<div class="container">
<div class="original-image"></div>
<div class="mask"></div>
</div>
CSS:
.container {
height: 300px;
width: 300px;
position: relative;
}
.original-image {
height: 300px;
width: 300px;
background : url(../images/myimage.png) no-repeat top center;
}
.mask {
height: 300px;
width: 300px;
position: absolute;
left: 0;
top: 0;
z-index: 1; //or more depending on what else is going on in the layout
background : url(../images/mask.png) no-repeat top center;
}
Ważne jest w tym przykładzie na pojemnik mieć takie same wymiary jak na obraz i maskę tak, że pozycjonowanie bezwzględne ustawia maskę na obraz poprawnie. Tworzenie obrazów w tła pozwala wypełnić elementy div takimi treściami, jak typ. Główną zaletą robienia tego w ten sposób, a nie z CSS sugerowanego gdzie indziej tutaj, jest to, że powinno to działać na prawie każdej przeglądarce.
Możesz to zrobić, używając svg – Akshay
Zasadniczo [Czy możliwe jest zastosowanie CSS na połowie postaci?] (Http://stackoverflow.com/questions/23569441/is-it-possible-to-apply- css-to-half-of-a-character), ale z obrazem. – BoltClock