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

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

页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色。...看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景颜色。...该混合模式会查看每个通道中的颜色信息,比较底色和绘图色,较亮的像素点的像素值减去较暗的像素点的像素值。 与白色混合将使底色反相;与黑色混合则不产生变化。...(可能是后台配置,传给前端),但是又需要让文字能够在任何背景颜色下都正常展出,此时,也可以尝试使用 mix-blend-mode: difference。...: difference 的 元素都可以正常展示出文本: CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色 mix-blend-mode

1.5K40

现代 CSS 解决方案:文字颜色自动适配背景色!

完整的 DEMO,你可以戳这里:CodePen Demo -- https://codepen.io/Chokcoco/pen/KKEdOeb 使用 CSS 相对颜色,实现文字颜色自适应背景 相对颜色,...**/ } 1 去减,而不是 255 去,是因为此刻,会将 rgb() 表示法中的 0~255 映射到 0~1。...会导致在灰色背景下,前景文字不可见; 绝大部分情况虽然可以正常展示,但是并不是非常美观好看 为了解决这两个问题,CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范...利用这个 CSS 颜色函数,可以完美的解决上述的问题。 我们只需要提供 #fff 白色和 #000 黑色两种可选颜色,将这两种颜色和提供的背景色进行比较,系统会自动选取对比度更高的颜色。...本文简单的借助: 使用 CSS 相对颜色,实现统一按钮点击背景切换 使用 CSS 相对颜色,实现文字颜色自适应背景 两个案例,介绍了 CSS 相对颜色的功能。

31210

CSS让你的文字更有文艺范

9B%B4%E6%96%87%E8%89%BA/#more 透明文字,模糊文字,镂空文字,渐变文字,图片背景文字CSS让你的文字也有freestyle~ 前言 我们做页面涉及字体的时候,最多就是换个...color换个font-family,总是觉得没体现出你内心的文艺范,这时是不是抱怨CSS并没有给文字设置什么样式,抱怨是没用哒,我们自己动手,看看能不能“创造”出一些CSS字体样式呢~ 透明文字 rgba...两种区别是rgba只是对文字有透明度,而opacity对整个div都有遮罩影响,对比其两个div的背景颜色即可发现区别。...模糊文字css中并没有指定文字模糊的样式,但是可以text-shadow喝-webkit-text-fill-color组合,得出模糊文字,即用text-shadow制造底层模糊文字-webkit-text-fill-color...渐变文字 这是个比较有趣的组合方式,CSS中并没有给我们提供文字的渐变,但是我们的background可以做到渐变颜色,那怎么让文字渐变呢,我们上面的一个属性是让文字透明,这样文字底下的东西我们就可以看的到

1.1K20

HTML和CSS实现酷炫的文字特效

前言 马上我们就要进入下一个阶段,也就是HTML和CSS实现前端界面的阶段了,想必很多小伙伴都想给自己的页面加点酷炫的特效,今天,我就给大家整理了一些非常酷炫的文字特效来装点你的页面!...(color属性)不同,它可以设置 transparent (透明) -webkit-text-stroke 这个属性用于设置文字的描边,第一个值写描边线的宽度,第二个写描边线的颜色 text-shadow...值越大,越模糊,为0时不模糊;第四个值是阴影颜色。 与box-shadow基本一致 注意:这四个值直接不需要逗号分隔,它们四个作为一个整体参数。...同时也可以写多个参数逗号隔开来实现更强的效果(下方有多个效果都运用到了这个技巧) -webkit-background-clip 将背景按照设定的参数裁切,一般书写text(即按照文本的样式裁切,仅保留文本的部分...的属性,就能创造出很多你想得到的和想都想不到的特效,甚至一些连写脚本都很难实现的特效,所以,努力探索css吧,冲冲冲!

2.9K00

css颜色渐变样式怎么_文本效果内置样式渐变填充

使用CSS渐变 CSS渐变类型的一种特殊类型 表示,由两种或多种颜色之间的渐进过渡组成。...使用线性渐变 线性渐变创建了一条沿直线前进的颜色带。 基础线性渐变 要创建最基本的渐变类型,您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标,也可以指定任意数量。...声明颜色和创建效果 无需局限于使用两种颜色,你想使用多少种颜色都可以! 默认情况下,所设置颜色会均匀分布在渐变路径中。...如果有些位置你没有明确设置,那么它将会被自动计算,第一种颜色会在0%处停止,而最后一种颜色是100%,至于其他颜色则是在它邻近的两种颜色的中间停止。...在此示例中,两种颜色在50%标记处共享一个颜色停止点,即渐变的一半: .striped { background: linear-gradient(to bottom left, cyan 50%

4.2K10

从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

一、颜色模式 颜色模式有两种: RGBA rgba(0,0,0,0.5); //黑色,透明度0.5 HSLA(颜色(0~360),饱和度(0%~100%),明度(0%~100%),透明度(0~1)) 红橙黄绿青蓝紫红...:颜色从 0~360 顺序,各占30度。...(color: transparent;) 二、文字阴影 语法: /*阴影可以叠加,使用逗号隔开*/ text-shadow: offsetX offsetY blur color,...2、CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。...--可选,默认黑色 inset:内阴影--可选,默认是外阴影 当然,box-shadow 和 text-shadow 一样,也是可以添加多个的,之间逗号隔开。

1.4K30

一步步教你CSS添加SVG过滤器

这也是为了和特定页面的主题保持一致,并展示了将 SVG 过滤器用于其他内容的两种创造性方法。...它设定了 padding 值,使其周围能够有适量的空间,颜色也会改变。...这可以高斯模糊来解决。在置换贴图后面添加代码。当你刷新页面时,它确实模糊了文本,但位移也消失了。同样这些问题可以在实现效果的过程中被修复。...添加导航 接下来让我们另外一个 SVG 滤镜创建一个水斑动画。将以下导航内容添加到正文代码的最顶部,也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡?的菜单图标。...添加新过滤器 接着为这个效果添加另一个过滤器。在SVG中,在先前添加的过滤器标记代码的后面添加以下代码。这里的效果和前面非常相似的方式建立起来。这将使菜单看起来像粘稠的液体一样分开。

2.8K20

带你入门HTML+CSS网页设计,编写网页代码的思路

以后我们编写的网页标签都需要放在这里面,这里我写了一段文字,它就会在浏览器里显示出来。这些就构成了我们网页的基本格式,大家也不需要去背,知道表示什么意思就行,需要的时候直接拿来用。...h2属于标题标签,从h1到h6都可以自定义,一般网页的标题或者需要着重表现的都可以,p标签表示段落或者一段文字介绍,img标签表示页面中的图像,你可以直接引入图片地址,注意,它是一个单标记。...那么知道了这些标签的意义,我们就可以根据自己实际的需求给这段html代码定义css样式,首先,我想给整个区域限制一个高度和宽度,那么我们就应该这样写:div.../未完待续/如果想加入其他的样式可以继续定义,如:添加一个背景颜色添加一个内边距或外边距。...#ff0000; /*这里给一个红色的字体颜色*/ text-align: center; /*让它居中*/}文字介绍和标题差不多,就是字体小一点,注意的是需要给段落定义一个行高,调整段落之间的间隔。

1.1K40
领券