Question

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

这在桌面设备上运行良好，但是对于移动设备，由于模糊而且UX大大减少，它消耗了太多的CPU。

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

我可以使用画布，但是如果我是对的，它会在模糊时使用相同的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

所以我不需要一个完美的＆＃34;模糊，只是一个确定颜色的阴影

inset box-shadow会满足吗？

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

您可以使用“彩色小偷”来确定图像的主要颜色，然后将其应用于框形阴影或类似的颜色。

替代模糊CSS具有更好的性能

2 个答案: