css-filters相关内容

为什么在父级上应用 CSS-Filter 会破坏子级定位?

所以我有这个标题屏幕“动画"；标题居中在全屏页面上，当您向下滚动时，它会变小并保持在页面顶部.这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以使其最小化: $(window).scroll( () => {“使用严格"；让 windowH = $(window).height();让 windowS = $(window).scrollTop();让 header = $("# ..
发布时间：2022-01-30 17:22:09 前端开发

有没有办法只用 CSS 为白色 PNG 图像着色?

我知道有很多 css 过滤器专门用于 webkit，但我找不到为白色 (#FFFFFF) 图像着色的解决方案.我尝试了一些过滤器的组合，但它们都没有使我的图像着色.我只能在灰度范围内更改图像，或棕褐色. 所以我的问题是:有什么方法可以仅使用 css 将我的全白 png 更改为(例如)红色? 就像这张图片所示: 解决方案 这可以通过 css masking 来完成，但不幸的是浏览 ..
发布时间：2021-12-29 22:55:36 前端开发

如何使用 CSS 创建磨砂玻璃效果?

我想创建一个 div 固定在一个位置并使其半透明 - 使其后面的内容部分可见和模糊.我正在寻找的样式类似于 中“查看全部"缩略图的 div苹果网站. 我唯一能做的就是调整 opacity: 0.9 但我不能模糊 div 下的内容. 注意:div 位置固定，背景滚动.scolls 的背景是文字和照片的混合. 解决方案 CSS CSS 3 有一个模糊过滤器(只有 webkit ..
发布时间：2021-12-18 11:17:54 前端开发

为什么过滤器(阴影)导致我的 SVG 在 Safari 中消失?

我正在使用 D3.js 开发应用程序.我被转移了一段时间，最近又回来了.今天我发现，虽然它在过去运行良好，但应用程序中的 SVG 地图不再显示在移动 Safari (iOS 9.3.1) 或桌面 Safari (v9.1 (11601.5.17.1) ) 上. 我提取了 SVG 和单个样式规则，并将它们放在 CodePen 上以说明发生了什么.在 Chrome 中，这支笔看起来不错.在 Sa ..
发布时间：2021-12-17 18:34:00 前端开发

如何仅使用 CSS 过滤器将黑色转换为任何给定颜色

我的问题是:给定目标 RGB 颜色，仅使用 CSS 过滤器? 要接受一个答案，它需要提供一个函数(任何语言)，该函数接受目标颜色作为参数并返回相应的 CSS filter 字符串. 这里的上下文是需要重新着色 background-image 内的 SVG.在这种情况下，是为了支持 KaTeX 中的某些 TeX 数学功能:https://github.com/Khan/KaTeX/is ..
发布时间：2021-12-17 14:38:55 前端开发

为什么在父级上应用 CSS 过滤器会破坏子级定位?

所以我有这个标题屏幕“动画"标题以全屏页面为中心，当您向下滚动时，它会变小并保持在页面顶部.这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以使其最小化: $(window).scroll(() => {“严格使用"；让 windowH = $(window).height();让 windowS = $(window).scrollTop();让 header = $("#he ..
发布时间：2021-12-01 16:14:20 前端开发

将CSS类应用于Canvas

我有很多CSS过滤器类，可以使用CSS过滤器将它们应用于图像.我的目标是使用应用于dataURL的过滤器转换图像. 为此，我将图像放置在画布中，然后在应用滤镜后保存图像.这是一个例子 const img = this.img//我的const canvas = document.createElement('canvas')const context = canvas.ge ..
发布时间：2021-05-15 18:34:03 前端开发

在模糊的背景上的锋利边缘

对于我当前正在处理的网站，我需要一个背景模糊的标题.我使用css :: before 来做到这一点，但我需要保留锋利的边缘. 这是我当前得到的: (您可能需要全屏打开它才能看到模糊的边缘.) 我尝试添加一个容器div，将其设置为 overflow:hidden ，以便可以将背景稍大一些，以便将其剪裁并隐藏毛刺的边缘，但这并没有.工作.我也宁愿不必拥有不必要的div，因为这就是我将 ..
发布时间：2021-05-14 20:24:24 前端开发

背景滤镜:模糊不适用于绝对位置元素

我正在尝试使用background-filter:blur制作具有玻璃效果的工具提示，只是该滤镜似乎无法在绝对位置上起作用.我想这是因为该项目已经超出了文档流程，所以无法识别背景，但是可能有解决该问题的方法. 图像:过滤器不会作用于绝对位置的元素 解决方案 我可以给您一个由用户在堆栈溢出中给出的示例.我在下面给出了示例代码，希望对您有所帮助: CSS: body，main ..
发布时间：2021-04-27 19:17:14 前端开发

如何使用CSS滤镜将具有不同颜色的图像色调更改为蓝色色调

我有不同颜色的图像.在Adobe Photoshop中，我的图像已使用智能滤镜过滤，从而为图像增加了色相，饱和度和亮度.因此，我需要将图像上的所有颜色更改为蓝色.但是在css中，hue-rotate()函数旋转所有颜色，但是我需要设置一种颜色并更改一些饱和度和亮度.这是源图像: 我需要得到这个: 因此您可以将其转换为所需的任何颜色. .cont {职位:相对宽度:1280px；高度: ..
发布时间：2021-04-26 19:48:57 前端开发

父元素background-filter不适用于其子元素

请参考以下代码段.我想知道如何使背景滤镜应用于下拉菜单 ul ? nav {位置:固定；最高:0;左:0；正确:0；高度:50px；背景:hsla(0，0％，100％，80％);边框底部:1px固定hsla(0，0％，0％，10％);-webkit-backdrop-filter:blur(2px);背景过滤器:blur(2px);z索引:1；}导航ul {显示:flex;align-it ..
发布时间：2021-04-26 19:06:24 前端开发

背景过滤器不适用于Chrome中的嵌套元素

我有一个 div.outer 和一个 div.inner 内部，都具有 position:absolute; 和 backdrop-filter:blur(8px); . https://jsbin.com/nihakiqocu/1/edit?html，CSS，输出 Safari(左)给出了理想的结果–两个div都模糊了它们背后的内容. 但是， Chrome浏览器(右)仅应用 di ..
发布时间：2021-04-26 18:57:40 前端开发

为什么在父对象上应用CSS过滤器会破坏子对象的位置?

所以我有这个标题屏幕的“动画"标题居中显示在全屏页面上，向下滚动时标题变小并保留在页面顶部.这是一个具有预期行为的可行示例，从中我剥离了所有不必要的代码以使其最小化: $(window).scroll(()=> {“使用严格"；让windowH = $(window).height();让windowS = $(window).scrollTop();let header = $(“#he ..
发布时间：2021-04-26 18:43:02 前端开发

基于带有CSS的背景图像的黑白文本

我正在尝试在双色标头上实现黑白文本的效果，该标头的一面总是白色，另一面带有背景图像（不同颜色）。 这是本示例中使用的CSS，仅因为图像具有纯黑色背景： .text { position：relative; 颜色：rgb（255，255，255）; mix-blend-mode：差异； text-transform：大写； font-size：60px; } ..
发布时间：2020-10-12 06:49:54 前端开发

CSS可以制作模糊的渐变阴影吗？

这里是阴影： 因此，我需要将其作为出现在按钮悬停按钮上的阴影。我知道它的CSS，但是我没有做出任何模糊处理： background-image：linear-gradient（-90deg， ＃CF77F3 0％，＃009BFF 47％，＃2AC9DB 100％）； border-radius：100px; 过滤器：blur（5px）; 因此，有两个基本问题： ..
发布时间：2020-10-12 04:03:00 前端开发

对比度父级的Gooey CSS效果

我正尝试仅使用CSS （不使用svg）创建粘糊糊的效果。 一切正常，但是我的父容器具有对比度过滤器，我不能在子元素上使用颜色（对比度过滤器会更改颜色）。 有人知道仅使用CSS来实现这种效果的基本方法，还是反转对比度滤镜以在子元素上获得正确的颜色？ 我的代码 body {背景：#fff;}。blobs {位置：绝对；顶：0;左：0;底部：0;对：0;背景：#fff;宽度：400 ..
发布时间：2020-10-12 03:44:49 前端开发