css - 具有更好性能的模糊 CSS 替代方案

Question

我正在显示一个元素列表，每个元素都有一个依赖于元素属性(外部图像 URL)的背景图像。背景图像必须模糊且透明，以保持元素文本的可读性(在背景上)。

这在台式机上运行良好，但在移动设备上，由于模糊和用户体验显着降低，它会消耗过多的 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>

Answer 1

so I don't need a "perfect" blurring, just a shadow with a determined colour

inset box-shadow 是否足够？

body {
  background: #212121;
}

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

<div></div>