Question

我将图片嵌套在插件的SPAN标记内。

<div class="grid">
   <span data-picture>
      <span data-src="img/pictures1.png"></span>
      <span data-src="img/pictures2.png"></span>
      <span data-src="img/pictures2.png"></span>
   </span>
</div>

编写一个针对png文件的CSS规则是否可以接受？

span[data-src^="img/"] {
   -webkit-filter: grayscale(1);
   filter: grayscale(1);
}

Answer 1

你的选择器有效，但我不知道为什么你会做这样的事情呢？如果你试图将它显示为图像，那是个坏主意。考虑可访问性问题以及可能的javascript无法正常工作。

span[data-src^="img/"] {
    -webkit-filter: grayscale(1);
    display: block;
    width: 100px;
    height: 100px;
    background: tomato;
    margin-bottom: 10px;
  }

<div class="grid">
   <span data-picture>
      <span data-src="img/pictures1.png"></span>
      <span data-src="img/pictures2.png"></span>
      <span data-src="img/pictures2.png"></span>
   </span>
</div>

使用css将目标特定嵌入<span data-src =“”>内部

1 个答案: