多IP主机用于挂协议挂游戏有什么好处!

本文介绍了一种仅用两行代码即可实现背景图片任意颜色赋值的技术,利用CSS的background-blend-mode属性,结合渐变色和混合模式,使黑色主色、白色底色的图片能够改变主色颜色,适用于前端开发中ICON图片颜色调整。

1.独立固定独享IP
2.并发数高
3.平台限制
4.ID的稳定登录
5.稳定协议代理软件
6.双向选择对比

``` css $img: 'https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png'; .pic { width: 200px; height: 200px; margin: 50px; text-align: center; font-size: 42px; line-height: 420px; float: left; background-image: url($img); background-size: cover; } .pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: lighten; background-size: cover; } .pic2 { background-image: url($img), linear-gradient(#333, #333); background-blend-mode: lighten; background-size: cover; } .pic3 { background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; background-size: cover; } 局限性尝试 -- 使用透明底×××片 上述方法要求了图片本身内容为纯色黑色,底色为白色。那么如果像 PNG 图片一样,只存在主色,而底色是透明的,是否能够同样实现效果呢? 假设我们有一张这样的 PNG 图片(灰色主色,透明底色)很遗憾,当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。所有,这个技术也就存在了一个使用前提: 图片的底色为白色,主色为黑色 当然主色也可以是其他颜色,只是这个时候叠加需要考虑颜色的融合,没有使用黑色直观。 background-blend-mode 实现图片任意颜色赋色技术总结 综上,我们确实只需要两行代码就可以实现白色底色黑色主×××片的任意颜色赋色技术。 { background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; } 其中,background-image 的第二值就是你希望赋值给的渐变色(当然,渐变色可以生成纯色)。 我们同时给一个标签设置了背景图片和渐变色,然后利用了 background-blend-mode:lighten 这个关键属性,达到了类似 PS 里的混合模式效果。 看起来 background-blend-mode 名为混合模式,但似乎表现上更像是 PS 当中的一种的剪切蒙板,混合模式是修改图片本身,蒙版跟遮罩都是在图片上一层通过叠加其他层对图像进行调整。 那么由此方法本身可以想到,一些能对图形进行色彩调整的 CSS 属性是否也能达到同样的功能呢?诸如: - [ ] filter 滤镜 - [ ] mask-image - [ ] mask-clip 感兴趣的读者可以自行尝试,在接下来的文章我也会继续进行探讨。 黑色纯色,背景白色可能局限了这个技巧的使用场景,但是在很多白色底色的页面中,这个方法还是可以很好的发挥作用,许多 ICON 图片不再需要两个或者更多个颜色的版本! background-blend-mode 兼容性 相较于 mix-blend-mode,background-blend-mode 的兼容性会更好一点。所以本文所介绍的技术在移动端是存在用武之地的:

转载于:https://blog.51cto.com/14066115/2344077

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值