使用更高性能的CSS模糊效果替代模糊CSS

Question

我正在展示一组项目，每个项目都有一个背景图片，该图片取决于项目属性（外部图片URL）。为了保持项目文本的可读性（在背景上方），背景图片必须模糊并透明。

这在桌面上效果很好，但在移动设备上，由于模糊和UX的影响，它会消耗过多的CPU资源，导致用户体验大大降低。

我想知道是否有一种方法可以以更好的性能实现类似的行为。使用的模糊值为100px，因此我不需要“完美”的模糊效果，只需要一个确定颜色的阴影即可（取决于外部图片URL）。

我可以使用canvas，但如果我没记错的话，它会消耗与模糊相同或相似的CPU资源。

这是一个简化版的项目示例：

.item-background-image {
  -webkit-filter: blur(100px);
  -moz-filter: blur(100px);
  -o-filter: blur(100px);
  -ms-filter: blur(100px);
  filter: blur(100px);
  background-size: 100%;
  width: 500px;
  height: 500px;
  opacity: 0.5;
}

<div class="item-background-image" style="background: url('http://www.publicdomainpictures.net/pictures/180000/velka/splash-in-dark-blue.jpg') no-repeat center"></div>

- Manolo

---

CSS 无法检测图像颜色，因此您目前的基本请求是不可能实现的。此外，您无法使用 CSS 模糊 background-image，只能使用 HTML 中的实际图像...这是您正在做的吗？ - Paulie_D

@Paulie_D 我使用内联CSS规则与图像URL (background: url("the URL")) 和 blur 过滤器来处理这些元素。 - Manolo

@Paulie_D 你说得对，表达不太好。加了一个例子。 - Manolo

无论如何，正如我所说，CSS 无法检测颜色，因此这是不可能的。 - Paulie_D

也许将div的“content”部分设为自己的背景会更好。也许是高度透明的白色？ - Paulie_D

Answer 1

您可以使用Color Thief确定图像的主要颜色，然后将其应用于box-shadow或类似的元素。

- Edel Gerardo

---

这只是一条评论，而不是答案。随着更多的声望，您将能够发布评论。谢谢！ - Miroslav Glamuzina

Answer 2

所以我不需要“完美”的模糊，只需要一个确定颜色的阴影。是否使用内嵌的box-shadow就足够了？

body {
  background: #212121;
}

div {
  background: tomato;
  box-shadow: inset 0 0 30px 15px #212121;
  height: 192px;
  width: 192px;
}

<div></div>

- James Donnelly

---

是的，但颜色必须取决于外部图像URL。 - Manolo