首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    css设置背景模糊周边有白色光晕,如何解决?

    */ z-index: 1; /* 确保蒙层在背景之上 */ } } 需求:想要给一个展示图片的区域底部加一个该图片的放大后的背景,并模糊 20,并增加一个黑色 0.6 透明度的遮罩...但是按照上面代码实现后,周边有一圈白色光晕,如图: 解决方案: 使用  backdrop-filter: blur(20px);   但是注意,backdrop-filter 不能直接加在背景图本身样式上...backdrop-filter 属性需要在具有定位的元素上使用,例如 position: relative 或 position: absolute; backdrop-filter 应用于的元素需要有一个背景元素在其后...所以我们将 backdrop-filter  放在  img-bg::before 里,即可生效: .img-bg::before { content: ""; position...*/ z-index: 1; /* 确保蒙层在背景之上 */ backdrop-filter: blur(20px); /* 添加20模糊效果 */ } 这样就白色光晕的效果了

    36710

    CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式

    我们在进行网页设计的时候,为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?...使用 RGBA 设置背景透明 我们使用 CSS 设置颜色的时候,一般适用十六进制值的颜色,比如黄色就是:#ffff00。其实颜色的值还可以通过 RGBA 的方式来设置。...所以在给背景添加颜色的同时,可以通过第四个参数提供透明度特性,比如设置为 0.3 的效果: 最终透明背景的 CSS 代码为:background:rgba(255, 255, 0, 0.3)。...使用 PHP 将十六进制的颜色值转换成 RGBA 格式 但是我们在后台设置颜色的时候,一般设置成十六进制的颜色值,然后再加上一个透明度: 那么怎么转换成 RGBA 格式呢?...我写了一个函数,使用 PHP 直接将十六进制的颜色值转换成 RGBA 格式或 RGB 格式(没有传递透明度): function wpjam_hex2rgba($color, $opacity=null

    4.5K40

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

    页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色。...像是下面这样: 0a211ef4e62a4f438b2c67dda076cc13_tplv-k3u1fbpfcp-watermark.gif 文本在黑色底色上表现为白色,在白色底色上表现为黑色。...与白色混合将使底色反相;与黑色混合则不产生变化。 通俗一点就是上方图层的亮区将下方图层的颜色进行反相,暗区则将颜色正常显示出来,效果与原图像是完全相反的颜色。... div { // 不确定的背景色 } p { color: #fff; mix-blend-mode: difference; } 无论背景色是什么颜色,设置了 mix-blend-mode...这里实际使用的时候,在非黑白场景下,还需要多加实验加以取舍。 最后 总结一下,本文介绍了利用 CSS 混合模式实现文本适配背景展示的一个小技巧

    2.8K40

    前端学习自学笔记:day09

    例: -复习元素:行内元素,可以作为文本的容器,同个类可以设置多个行 内元素。...例:cccccc HTML布局: 多列显示内容:解析: 样式标签 #header {定义头部的CSS样式 background-color:black; 定义背景元素为黑色 color:white...:black; 定义背景元素为黑色 color:white; 定义字体为白色 clear:both; 盒子的两侧都不能出现元素,由于已经有左侧的元素,所以盒子位置为最下,刚好 成为了页面的底部。...HTML5的 , , , 以及 来创建多列布局: header { 定义header的css样式 background-color:black; 背景颜色为黑色 color:white;文字为白色...Copyright W3Schools.com 使用表格的HTML布局;使用 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式: .lamp { 定义lamp类选择器 width:100%

    1K60

    分享10个超实用的高级 CSS 技巧

    使用它,我们可以设置元素的内容应如何与其父元素和背景混合。在本例中是一个 img 元素。 在这里,你可以看到我使用了两张图像:一张是彩色的,另一张是黑色的,并且都有白色背景。...我将仅使用 CSS 删除图像的背景,而不使用任何图像编辑软件。 要从彩色图像中删除白色背景,你可以使用带有值乘的 mix-blend-mode CSS 属性。....blend-multiply{ mix-blend-mode:multiply; } 要从黑色图像中删除白色背景,你可以使用带有值 color-burn 的 mix-blend-mode CSS...嗯,它不仅限于背景; 你还可以使用以下 CSS 规则将渐变颜色应用于文本。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出,如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色,具体取决于背景颜色。

    60610

    【CSS】1965- 分享10个超实用的高级 CSS 技巧

    使用它,我们可以设置元素的内容应如何与其父元素和背景混合。在本例中是一个 img 元素。 在这里,你可以看到我使用了两张图像:一张是彩色的,另一张是黑色的,并且都有白色背景。...我将仅使用 CSS 删除图像的背景,而不使用任何图像编辑软件。 要从彩色图像中删除白色背景,你可以使用带有值乘的 mix-blend-mode CSS 属性。....blend-multiply{ mix-blend-mode:multiply; } 要从黑色图像中删除白色背景,你可以使用带有值 color-burn 的 mix-blend-mode CSS...嗯,它不仅限于背景; 你还可以使用以下 CSS 规则将渐变颜色应用于文本。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出,如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色,具体取决于背景颜色。

    65610

    118.精读《使用 css 变量生成颜色主题》

    网页颜色的对比度值在 1:1 到 21:1 之间,文本和图像文本的的对比度最小值为 4.5:1,也就是说低于这个值得对比度都不符合标准。我们看一下列举的几种颜色对比度,对比度越高,也越有利于阅读。...首先讲了使用 css 变量的方式,支持各种颜色主题的切换。利用 js 去设置颜色变量,支持主题的颜色切换。...如果用户选择了与按钮颜色想接近的背景色,我们又该怎么处理了,紧接着这个演讲给出了根据明度决定按钮文字颜色是黑色还是白色的方案。...根据明度决定是黑色还是白色 具体代码如下,大致原理是把彩色转为灰度的颜色,有一个著名的心理学公式:Gray = R*0.299 + G*0.587 + B*0.114,然后在根据颜色灰度决定使用黑色的主题还是白色的主题...比如这篇文章中,关于根据明度决定按钮文字是黑色还是白色的代码如下: :root { --light: 80; /* 文字颜色变化的临界值 */ --threshold: 60; } .btn

    1.1K20

    Keil MDK 将升级为 Keil Studio,你想要的黑色主题来了,附手把手使用教程

    是的,你没看错,Keil或将迎来一次全新的升级。 本文带你认识Keil Studio的一些新功能(特点),以及Keil Studio Cloud(网络在线版)基础使用教程。...Keil Studio Cloud,你可以理解为它是一款不需要安装,打开浏览器就能直接开发的网络在线IDE。 可以说,它是基于Keil MDK,针对物联网、机器学习和单片机做的一次全新升级。 ?...,直接打开浏览器就可以使用,但需要注册账号。...目前使用最新的Arm Compiler 6按理说速度应该很快才行,可能是因为这个工程相对比较大,还有就是在线云端需要调用编译器,有延迟的原因。...7.更多使用方法 Keil Studio Cloud的使用方法和keil MDK有很多类似之处,也有很多改进的地方。 这里放两个官方的视频,让大家进一步了解这个工具。

    11.1K10

    【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

    文章目录 一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例...设置总体背景 : 为 body 标签设置背景颜色或图片即可 图片自适应填充 : 设置 标签的内容宽度为 100% 即可 , 目的是令图片自适应缩放 ; /* 清除标签默认的内外边距 *...float: left; } 如果一行排满 则自动换行 , 通过精密计算 , 可以实现网格样式的排列 ; 5、设置文本水平垂直居中 设置 text-align: center; 样式 , 可以使文本水平居中...: none; /* 设置文字颜色 */ color: #40510a; 7、设置鼠标经过的样式 使用伪类选择器 , 这里使用的是链接伪类选择器 , 设置的是链接在鼠标经过时的样式...; } /* 设置无序列表项中的 链接样式 */ .nav ul li a { /* 设置为块级元素 */ display: block; /* 设置链接尺寸

    2.8K20
    领券