6
巧用css去图片白色底 让白色底图片在网页透明
source link: https://blog.p2hp.com/archives/9793
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
一般产品列表页都是白底的产品图片，有时觉得白底的不好，想换成灰色或者其它淡色的底，是否需要重新处理图片，其实不用的，我们可以用css 的混合属性来让白底的图片成透明显示，这样我们在图片底下定义任意背景色，就相当于图片换了背景色，而不用在Photoshop里换背景。由于是css定义的，基本上也不会影响性能。
mix-blend-mode: multiply正底叠底
在photoshop里正底叠底是去掉白色的，同样在css里，我们通过对img进行正底叠底就可以去掉图片的白色底，这样图片就透明了。
所以有一些电商平台图片做成白底是有原因的，他们可能要在某处想实现图片背景改色。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK