在 HTML 页面上使用 CSS 铅笔效果的正确方法是什么？答案

【问题标题】：What is The Correct Way to Use a CSS Pencil Effect On an HTML Page?在 HTML 页面上使用 CSS 铅笔效果的正确方法是什么？
【发布时间】：2019-02-04 03:41:42
【问题描述】：

我正在尝试开发一个使用 CSS 铅笔效果过滤器的应用。

我复制的代码似乎与我从中获取它的页面上的代码不同。在我的开发环境中，它只是将图像转换为灰度，并没有实现铅笔效果。

为什么这段代码不能在我的开发环境中运行？

我的代码：

<html>
<style>
div {
  overflow: hidden;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuYvJOVHBvDlrc_9N2QdTwltioVq1og5UkLsLo1-32kFcxhmZyYQ');
  width: 170px;
  height: 200px;
  overflow: hidden;
  position: relative;
  filter: grayscale(100%);

  &:after {
    content: '';
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: grayscale(100%) invert(100%) blur(5px);
    mix-blend-mode: color-dodge;
  }
}
</style>
<body>
<div role="img"></div>
</body>
</html>

Oringinal Code:

div {
  overflow: hidden;
  background-image: url('https://cdn-images-1.medium.com/max/1600/1*v-q4is6XGAQ6XLYI2m7NzQ.jpeg');
  width: 160px;
  height: 196px;
  overflow: hidden;
  position: relative;
  filter: grayscale(100%);

  &:after {
    content: '';
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: grayscale(100%) invert(100%) blur(5px);
    mix-blend-mode: color-dodge;
  }
}

【问题讨论】：

那么这个“不工作”是怎么回事。
你需要向我们展示它应该如何工作

标签： html css image filter sass

【解决方案1】：

我假设您在自己的项目中使用代码，而不是在小提琴上。如果是这样，则外部小提琴设置为使用 SCSS，您可能没有将 SCSS 编译为常规 CSS，这使得 &:after 部分出现语法错误。

您可以通过添加 div:after 而不是 &:after 来使用非嵌套版本的样式。以下内容对您有用：

<html>
<style>
    div {
        overflow: hidden;
        background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuYvJOVHBvDlrc_9N2QdTwltioVq1og5UkLsLo1-32kFcxhmZyYQ');
        width: 170px;
        height: 200px;
        overflow: hidden;
        position: relative;
        filter: grayscale(100%);
    }

   div:after {
       content: '';
       background: inherit;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       filter: grayscale(100%) invert(100%) blur(5px);
       mix-blend-mode: color-dodge;
   }
</style>
<body>
<div role="img"></div>
</body>
</html>

【讨论】：

有什么问题？ jsfiddle 正在使用 SCSS 进行查找
是的，检查元素以查看代码并检查小提琴，您将看到 SCSS 已激活...还将您的代码与他的代码进行比较，您将获得相同的输出
@TemaniAfif 他说他从小提琴中“得到”了代码。该代码实际上可以在小提琴上使用，但是我假设他是在自己的项目中使用它而不是在小提琴本身上。
Lesleyvdp，非常感谢，这是我向 stackoverflow 提出的第一个问题，我印象非常深刻，如果您不感到不便，我还有一个问题，有没有办法将此代码分配给标签，例如img、画布、视频等以类的形式。
@Zodiax 朋友别担心，毕竟这就是社区的目的！我很高兴能帮上忙。如果答案帮助您确保将其标记为正确，以便人们知道问题已“解决”。你的意思是对img、canvas或video标签应用灰度效果？

【解决方案2】：

您不能直接将 SCSS (Sassy CSS) 文件插入 HTML

很遗憾，您不能按照上面的代码将 SCSS (Sassy CSS) 文件直接插入到 HTML 中。这是因为 SASS 是 CSS3 语法的超集（或所谓的预处理器或扩展），Web 浏览器不支持。

虽然 SCSS 为开发人员提供了许多本机 CSS 中不存在的便利功能，例如继承、嵌套、逻辑语句、混合等，但它也限制了您在 HTML 页面中拥有指向 .scss 文件的链接。

因此，要在 HTML 页面中充分利用 SCSS 提供的所有功能，您首先必须将其编译为 CSS。

要将您的 SCSS 转换为 CSS，您可以使用此工具：

SCSS to CSS Converter

将您当前的代码替换为This:

*为了使这个答案自成一体，我已经为你转换了它。

div {
  overflow: hidden;
  background-image: url('https://cdn-images-1.medium.com/max/1600/1*v-q4is6XGAQ6XLYI2m7NzQ.jpeg');
  width: 160px;
  height: 196px;
  overflow: hidden;
  position: relative;
  filter: grayscale(100%);
}
div:after {
  content: '';
  background: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: grayscale(100%) invert(100%) blur(5px);
  mix-blend-mode: color-dodge;
}

【讨论】：