Question

有什么方法可以向透明Spritesheet添加边框吗？

假设我有这个：

.sq {
  background-image: url(https://cdn1.imggmi.com/uploads/2019/2/1/e2a2c021dba58c1a7c98252d3b1a6568-full.png);
  height: 32px;
  background-position: left -160px top -32px;
  width: 32px;
}

<div class="sq"></div>

我将如何做到这一点，以便在其透明边缘上添加一个2px的黄色小边框？我知道我可以使它成为棕褐色或色相/饱和度...但是我还没有在Spritesheet上找到边框的方法。

我想在图像本身上加边框。不是DIV或容器。

Answer 1

添加过滤器：在您的课程filter: drop-shadow(2px 1px 0 yellow) drop-shadow(-1px -1px 0 yellow);中添加阴影

.sq {
  background-image: url(https://cdn1.imggmi.com/uploads/2019/2/1/e2a2c021dba58c1a7c98252d3b1a6568-full.png);
  height: 32px;
  background-position: left -160px top -32px;
  width: 32px;
  -webkit-filter: drop-shadow(2px 1px 0 yellow)
                  drop-shadow(-1px -1px 0 yellow);
  filter: drop-shadow(2px 1px 0 yellow) 
          drop-shadow(-1px -1px 0 yellow);
}

<div class="sq"></div>

CS Spritesheet选择的边框背景

1 个答案: