Как правильно использовать эффект карандаша CSS на HTML-странице? - PullRequest
Новая
       8

Как правильно использовать эффект карандаша CSS на HTML-странице?

0 голосов
/ 29 августа 2018

Я пытаюсь разработать приложение, которое использует 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>

Международный код :

enter image description here

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;
  }
}

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Вы не можете напрямую вставить файл SCSS (Sassy CSS) в свой HTML

К сожалению, вы не можете напрямую вставить файл SCSS (Sassy CSS) в ваш HTML, как указано в коде выше. Это потому, что SASS является надмножеством (или так называемым препроцессором или расширением) синтаксиса CSS3, который НЕ поддерживается веб-браузерами.

Хотя SCSS предлагает множество удобных функций для разработчиков, которых нет в собственном CSS, таких как наследование, вложение, логические операторы, миксины и т. Д., Он также ограничивает наличие ссылки на файл .scss на вашей HTML-странице.

enter image description here

Таким образом, чтобы в полной мере воспользоваться всеми функциями, предлагаемыми SCSS на вашей HTML-странице, сначала необходимо скомпилировать ее в CSS.

Чтобы преобразовать ваш SCSS в CSS, вы можете использовать этот инструмент:

Конвертер SCSS в CSS

Замените ваш текущий код на 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;
}
0 голосов
/ 29 августа 2018

Я предполагаю, что вы используете код внутри своего собственного проекта, а не на скрипке. Если это так, внешняя скрипта была настроена на использование 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...