首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

神奇的 CSS文字智能适配背景颜色

看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,文字智能适配背景颜色。...混合模式 mix-blend-mode: difference CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式...linear-gradient + Mix-blend-mode 当然,不一定是黑色或者白色,看看下面这个例子,有这样一种场景,有的时候我们不太确定背景颜色的最终表现值(可能是后台配置,传给前端),但是又需要让文字能够在任何背景颜色下都正常展出...无论背景色是什么颜色,设置了 mix-blend-mode: difference 的 元素都可以正常展示出文本: CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色...最后 总结一下,本文介绍了利用 CSS 混合模式实现文本适配背景展示的一个小技巧

1.6K40

CSS你的文字更有文艺范

9B%B4%E6%96%87%E8%89%BA/#more 透明文字,模糊文字,镂空文字,渐变文字,图片背景文字,用CSS你的文字也有freestyle~ 前言 我们做页面涉及字体的时候,最多就是换个...color换个font-family,总是觉得没体现出你内心的文艺范,这时是不是抱怨CSS并没有给文字设置什么样式,抱怨是没用哒,我们自己动手,看看能不能“创造”出一些CSS字体样式呢~ 透明文字 用rgba...模糊文字css中并没有指定文字模糊的样式,但是可以用text-shadow喝-webkit-text-fill-color组合,得出模糊文字,即用text-shadow制造底层模糊文字,用-webkit-text-fill-color...渐变文字 这是个比较有趣的组合方式,CSS中并没有给我们提供文字的渐变,但是我们的background可以做到渐变颜色,那怎么文字渐变呢,我们上面的一个属性是文字透明,这样文字底下的东西我们就可以看的到...,那我们试想,如果文字下面的渐变背景颜色显示出来,这样的不就是相当于文字有了背景颜色嘛,我们先试试: div{ font-size: 40px; background: linear-gradient

1.1K20
领券