CSS背景-滤镜: Safari中的模糊和Chrome渲染问题

文章/答案/技术大牛

发布

2回答

html、css

webkit-backdrop-filter: blur(10px); <div id="content"></div> </div> This is on Safari(这是我想要的，也应该是这样的) This is on Chrome (这是错误的。)这里有一个问题。如果对象的父对象及其本身具有backdr

浏览 43提问于2020-12-02得票数 0

2回答

背景.滤镜在圆角上留下手工艺品

css、safari、css-transitions、css-animations

我有一个元素，一个淡出CSS动画和子元素，有一个背景过滤器应用于模糊背景在Safari。移除背景-滤镜移除角上的手工艺品。

浏览 3提问于2016-06-15得票数 1

1回答

CSS -模糊滤镜在片刻后停止工作

html、css、web、blur

加载完成后，模糊将消失。为什么会这样呢？而且，当我后来用JS设置它时，它仍然不起作用。

浏览 0提问于2018-02-03得票数 0

2回答

如何修复CSS背景-滤镜模糊消失时，使用过渡变换或持续时间？[Chrome]

css、blur

简单的代码：当您将背景滤镜模糊与父对象中的过渡持续时间或变换组合在一起时，会发生错误。.slider__item { backdrop-filter: blur(89px);当您单击该按钮时，CSS模糊会消失一秒钟，然后幻灯片再次变模糊。Chrome:问题 Firefox: Works

浏览 4提问于2021-03-31得票数 2

3回答

Chrome中的CSS渐变条纹

css、gradient

我使用Colorzilla CSS渐变生成器创建了一个具有多个色标的背景。它在Firefox和Safari中工作得很好，但在Chrome中有一个微妙的条纹/条带的事情发生，这是令人沮丧的。下面是我的代码和一个jsfiddle链接：background: rgb(0,0,0); /* Old browsers */ background: -moz-lin

浏览 2提问于2013-02-15得票数 1

回答已采纳

2回答

Safari和Chrome中的视频渲染比Firefox中的稍亮一些

html、css、google-chrome、video、safari

我试着在较大的静态PNG背景上安装一小部分视频，视频的边缘应该无缝地混合到背景中，即。你不应该能够识别视频在哪里结束，背景中的静态图像从哪里开始。filter: saturate(100%) (这应该根本不会改变视频)。我创建这个JSF

浏览 1提问于2016-10-19得票数 7

1回答

CSS背景-滤镜模糊效果在Chrome中未对齐

html、css

我有一个具有固定高度的父div，以及一个延伸到父div外部的子div。在Chrome 75中，这会导致父div的背景滤镜效果应用在预期区域之外。IOS/Safari不会出现这种情况。试试吧：请注意:您需要在chrome://标志中激活‘实验性Web平台功能’才能看到<em

浏览 21提问于2019-07-31得票数 1

1回答

如何在灯光画廊中模糊每个图像项目的背景？(具体)

image、background、gallery、blur、light

我使用光画廊()为我的网站，并想对它进行一些自定义。我想通过在背景图像( CSS)中使用这些图像来模糊在画廊中打开的每个图像项的背景图像。好吧，Light gallery使用了更多来自html标签属性的Java Script引用来查看图库中的值，这对于那些不擅长JS的人来说有点复杂。中模糊了(li)标签的背景图像，它会影响缩略图

浏览 0提问于2016-10-04得票数 0

2回答

在C#中使用WebKit时，我到底嵌入了什么？

c#、google-chrome、safari、webkit、embed

据我所知，Safari和Chrome都使用WebKit。有许多项目允许您嵌入WebKit，但我实际上想要的是在C#应用程序中嵌入Chrome (用于Windows)，以便我的应用程序呈现与Windows上的Chrome相同的效果。所以当我嵌入的时候，比如说，渲染，CSS支持，Javascript引擎，字体渲染等等，是Chrome

浏览 2提问于2010-08-13得票数 6

回答已采纳

1回答

使用css3 scale模糊metro应用程序中的视图

javascript、jquery、css、scale

我试图将DIV缩放到0.8倍，但这导致DIV变得模糊。它似乎在Chrome和Safari中运行良好，但在metro应用程序中变得模糊。我试着使用一些Jquery transform2d插件，我想可能是CSS渲染比较慢，但是模糊效果也在里面。有没有人能提出一个解决这个问题的办法。

浏览 0提问于2012-07-03得票数 0

1回答

你能告诉我我的照片在Safari里是什么样子吗？

image、safari、retina-display、image-scaling、retina

我目前正在尝试测试这个新的css规则，它修复了Chrome中模糊的视网膜图像。我应用于我的img标记的规则是：图像渲染：-webkit-优化-对比度。虽然它解决了Chrome中模糊的问题，但我听说它可能会破坏Safari中的图像外观。如果在Re

浏览 3提问于2021-03-31得票数 0

2回答

通过css模糊背景图像

php、html、css、wordpress、hook-woocommerce

</div> </div> 它们的CSSkhaleejdev.com/kds/newtornetto/wp- background-size: 100%;我想让下面的标题背景图像模糊请帮助我在不影响标题<

浏览 63提问于2018-06-11得票数 1

回答已采纳

1回答

视网膜与非视网膜上的CSS3滤镜投影半径

css、svg、css-filters

Chrome上的投影滤镜在视网膜上的模糊半径比非视网膜上的小。safari似乎没有什么问题。CSS： fill: #FFF; -moz-filter12px 24px #000);} 视网膜显

浏览 0提问于2014-08-22得票数 1

1回答

如何通过设备更改背景颜色来使-webkit-backdrop-filter可用性？

ios、css、safari、mobile-safari、background-color

我非常喜欢Webkit的背景滤镜的外观，而且我是CSS和HTML的新手，但我知道背景滤镜只在Safari上可用，而Safari的浏览器数量并不多。我想知道如何让不支持背景滤镜的设备默认为不透明背景。这是一个例子，如果我想让具有背景过滤功能的设备的用户看到 .

浏览 12提问于2016-09-19得票数 2

回答已采纳

1回答

背景位置图像叠加(适用于IE，不适用于Mozilla/Chrome/Safari)

javascript、jquery、firefox、css、google-chrome

我在Firefox、Google Chrome和Safari中使用以下jquery背景位置命令定位背景图像时遇到问题。代码在IE 8中工作正常。$('#element').css({ backgroundPosition：'xpx ypx‘})；所需的效果是从屏幕右侧到左侧的连续流体流，在主页面内容后面模糊。这是使用2个流体图像实现的，一个完全清晰，

浏览 1提问于2010-06-14得票数 0

回答已采纳

1回答

如何在转换变换时停止Chrome截断CSS模糊滤镜

css、google-chrome

我正在CSS中构建一个视觉效果，它将一个filter: blur应用于一个元素，并使该元素的子元素具有动画效果。其中一些子对象部分看不到，这会导致在设置动画时Chrome中的渲染不一致：当过渡处于活动状态时，CSS滤镜的呈现方式与元素固定时的呈现方式不同。它似乎只在移动时裁剪并模糊视口中元素的一部分。即使元素是静态的，应用这些属性也会产生相同<

浏览 28提问于2019-10-02得票数 3

1回答

lottie-动画svg在Safari中非常像素化/模糊，但不是Chrome/FF

safari、scaling、svg-animate、lottie、blurry

macOS Mojave After Effects 17.0.2 (CC 2020)最新版本的Chrome/FF/Safari和Lottie/Bodymovin 在Safari中缩放svg动画(transform: scale(>1))时，它将被渲染为非常像素化/模糊。在Chrome和Firefox中，渲染没有问题。

浏览 4提问于2020-02-17得票数 2

1回答

投射阴影css滤镜不适用于safari 9.1

macos、filter、safari、css-filters、drop-shadow

drop-shadow css filter不能与Safari9.1一起工作，请建议任何可能的方法来解决这个问题。我已经为渲染的元素使用了一个类，但是由于滤镜的原因，元素的背景是不可见的。

浏览 0提问于2016-04-04得票数 3

1回答

Safari不支持CSS filter中的小数: blur()

css、filter、safari

我需要在文本上使用微妙的模糊，所以我使用了0.6px的模糊滤镜。Firefox和Chrome似乎很好地处理了像素(小数)的分数： ? 然而，Safari (14.0和更新版本)不支持像素的分数。所有内容都会四舍五入为最接近的整数。 ? 你可以在下面看到这些截图的现场演示。如果你访问Chrome和Firefox，你会

浏览 101提问于2021-08-23得票数 0

回答已采纳

2回答