blur 相关问题

我有一个 QCard，希望在它变为非活动状态（失去焦点）时触发一个操作我有一个 QCard，想在它变为非活动状态（失去焦点）时触发一个操作 <q-card bordered flat v-for="pill in loadedPerson?.Pills" :key="pill.ID" class="pill text-center bg-blue-1" @blur="updatePill"> <q-card-section class="q-pb-none"> <div class="text-h4 text-bold">{{ pill.Name }}</div> </q-card-section> <q-card-section class="flex row q-pt-none flex-center items-center"> <q-input maxlength="2" size="2" dense borderless v-model="pill.Amount" class="text-h4 text-bold amountPills"></q-input> <q-icon size="xl" name="las la-plus-circle" class="cursor-pointer" @click="pill.Amount++"></q-icon> <q-icon size="xl" name="las la-minus-circle" class="cursor-pointer" @click="pill.Amount--"></q-icon> </q-card-section> </q-card> 我预计当我离开 QCard 时 @blur 会触发 updatePill，但没有，什么也没有发生（也没有发出相关消息）。我也尝试过onfocusout="updatePill"，但还是没有反应。默认情况下，无输入 HTML 元素不接受焦点。要使其可聚焦，请指定其 tabindex 属性。 <div>not focusable </div> <div tabindex="0"> focusable </div> q-card 是 div，因此您可以利用相同的机制。 <template> <q-card bordered flat v-for="pill in loadedPerson?.Pills" :key="pill.ID" class="pill text-center bg-blue-1" @blur="updatePill(pill)" tabindex="0" > <q-card-section class="q-pb-none"> <div class="text-h4 text-bold">{{ pill.Name }}</div> </q-card-section> <q-card-section class="flex row q-pt-none flex-center items-center"> <q-input maxlength="2" size="2" dense borderless v-model="pill.Amount" class="text-h4 text-bold amountPills"></q-input> <q-icon size="xl" name="las la-plus-circle" class="cursor-pointer" @click="pill.Amount++"></q-icon> <q-icon size="xl" name="las la-minus-circle" class="cursor-pointer" @click="pill.Amount--"></q-icon> </q-card-section> </q-card> </template> <script setup lang="ts"> const loadedPerson = { Pills: [ { ID: '1', Name: 'Name 1', Amount: 11, }, { ID: '2', Name: 'Name 2', Amount: 12, }, ], }; function updatePill(pill: any) { console.log('-> updatePill', pill); } </script>

vue.js vuejs3 blur quasar-framework

回答 1 投票 0

如何使用java模糊覆盖层后面的内容？

我有一个布局，可以使用 Context.LAYOUT_INFLATER_SERVICE 在其他应用程序之上公开。但无论我如何搜索，我都找不到一种方法可以将这个视图下的内容模糊到...

java android overlay blur

回答 0 投票 0

在 LibGDX 中模糊屏幕

我正在尝试为我的暂停菜单创建这样的背景效果。我目前的想法是暂停时截图，保存，打开，高斯模糊，然后渲染到屏幕上并渲染...

java android libgdx blur

回答 2 投票 0

AlertDialog 背后的模糊背景

我们从 API 14 中了解到，Below Blur 已被弃用 dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND); 有没有其他方法可以使屏幕模糊...

android android-alertdialog blur

回答 5 投票 0

如何以编程方式触发 Focusout 事件

如何仅使用 JavaScript 而不是 jQuery 以编程方式触发 focusout 事件？例如，在下面的代码中，想法是它应该警告“Hello, world!”。因为 focusout()

javascript blur focusout

回答 2 投票 0

带有 Vuetify Textarea 的浮动标签在粘贴和模糊后不会在 Textarea 上方重置

我有一个 Textarea 模糊问题，在粘贴后单击出 Textarea 后无法重新定位浮动标签。我将一些文本粘贴到 Textarea 中并以任何方式退出 Textarea (

vuejs3 textarea blur floating-labels

回答 2 投票 0

Android 12 RenderEffect 模糊不是应用于背景而是应用于整个视图

我正在尝试使用新的 Android 12 RenderEffect API 模糊底片。但是直到现在我可以在整个视图上获得模糊效果，使文本不可读。现在，这是我的底页

android android-studio android-layout render blur

回答 2 投票 0

如何制作带有模糊效果 CSS 的下拉列表

我试图让我的下拉菜单具有与我的导航栏相同的不透明度和相同的模糊效果，不透明度工作正常，但模糊效果没有。听说要用伪类来实现...

css dropdown navbar bootstrap-5 blur

回答 0 投票 0

在 react native 中使用@react-native-community/blur 库时出现问题

s你好朋友们，我打算把我的UI项目的一部分做成模糊，我使用了@react-native-community/blur库，但是当我使用它时，我在加载图像时出错。我会很...

react-native blur react-native-community react-native-blur

回答 0 投票 0

框警报模糊

我正在制作一个程序，我想在警告框到达整个文档时应用“模糊”效果。你能建议我怎么做吗？我使用的是在网上找到的示例，但我...

javascript css blur

回答 0 投票 0

IronPDF 使 SVG 模糊（传单图）

我正在使用 iron PDF 将传单地图 SVG 添加到 PDF，我的传单 SVG 由层组成，自定义 SVG 设置为“填充”或背景。在网络浏览器中呈现时，SVG 清晰且准确...

svg leaflet blur ironpdf

回答 0 投票 0

背景滤镜模糊在更改窗口大小时不调整大小

我有以下代码在背景图像上应用模糊背景滤镜：我有以下代码在背景图像上应用模糊backdrop-filter： <div className="container"> <div className="blur" /> <div className="box"> <h2>Start editing to see some magic happen!</h2> </div> </div> CSS： .container { height: 100vh; width: 100vw; } .blur { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .blur::before { content: ""; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); } 在调整窗口大小之前似乎效果很好，过滤器不会像背景图像那样调整大小。我尝试将父级 div 更改为 position: relative 但它也没有用 https://codesandbox.io/s/snowy-tdd-b5u8ed?file=/src/App.js 现在的解决方法是将这个额外的样式添加到背景过滤器所在的同一类/ID。非常适合我。 filter: blur(0); 例子： .blur-section { width: 100%; backdrop-filter: blur(12px); filter: blur(0); } 这似乎是一个 WebKit 问题，因为它在 Firefox 中对我来说工作正常。我有点通过将模糊的 div 设置为非常大的尺寸来解决它，因此它总是覆盖整个屏幕。然而，这似乎确实会导致一些小的瑕疵，例如 Firefox 中的闪烁。这显然会在 Chrome 112 中得到修复（目前是测试版现在稳定）。我可以在 Chrome 110 和 111 中重现该问题，但在 112 和 113 中都不能。在 MacOS 下测试过。 Chrome 112 的发布日期是2023 年 3 月 29 日。见https://chromestatus.com/roadmap 所以我想，对于 some 开发人员来说，正确的答案是“等待”。添加另一个大小为 0 的过滤器将解决此问题 ::before 不是一个好的选择。您最好将 filter:blur 应用于图像本身。 .container { height: 100vh; width: 100vw; } .blur { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; filter: blur(60px); backdrop-filter: blur(60px); } 我现在使用以下代码以防万一有人想知道 .blur { position: fixed; width: 100%; height: 100%; background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(60px); backdrop-filter: blur(60px); scale: 1.1 !important; // to hide white border when using blur filter transform: translate3d(0,0,0); // enable 3d acceleration on safari } 问题在 chrome 版本 112 中得到解决

css reactjs filter blur

回答 7 投票 0

React Native：在 UIManager 中找不到“BlurView”

我在尝试实施@react-native-community/blur (https://github.com/Kureev/react-native-blur) 时遇到以下错误。我试过从 4.3.0 降级到 4.2.0，然后降级到 4.1.0，没有 s...

react-native blur

回答 1 投票 0

是否有一种在 IE11 中进行背景模糊的纯 css 方法？

我想让背景可见但在打开弹出窗口时模糊。我不是问图像模糊，我问的是给页面添加模糊，我想知道目前是否有任何 CSS-

css blur css-filters

回答 1 投票 0

如何修复“变换比例”产生的模糊

我有一个问题，我已经拖了几个月，我无法解决，因为我发现所有的“解决方案”都不适合我，当我改变我的 DIV eleme 的比例时，问题出现了...