Change color of PNG image via CSS?

后端 未结 16 1611
自闭症患者
自闭症患者 2020-11-22 07:33

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

16条回答
  •  醉梦人生
    2020-11-22 08:09

    Yes :)

    Surfin' Safari - Blog Archive » CSS Masks

    WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.
    [...]
    We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist.

    -webkit-mask (background)
    -webkit-mask-attachment (background-attachment)
    -webkit-mask-clip (background-clip)
    -webkit-mask-origin (background-origin)
    -webkit-mask-image (background-image)
    -webkit-mask-repeat (background-repeat)
    -webkit-mask-composite (background-composite)
    -webkit-mask-box-image (border-image)
    

提交回复
热议问题