如何使用纯 CSS 在图像中创建半色调效果？

Question

This is my CSS code:这是我的 CSS 代码：

 <TITLE>My Page</TITLE> <head> <style>.retroimage1 { filter: blur(0.5px) grayscale(100%); } </style> </head> <img class="retroimage1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg"> <p>VOLVO 740 TURBO, red, Mitsubishi turbo fitted to Volvo engine £2,300</p>

What I want to try and do is make the image both grayscale and have dots on it - like the images below of a printed page.我想要尝试做的是使图像既有灰度又有点 - 就像打印页面下面的图像一样。

Using only CSS with no Javascript, how can I achieve this halftone in my HTML:仅使用 CSS 而不使用 Javascript，如何在我的 HTML 中实现此半色调：

in addition to the grayscale filter (the original image had sepia in this scan).除了灰度过滤器（原始图像在此扫描中具有棕褐色）。

I would appreciate any help, been trying on my own and looking on Google but getting nowhere with this.我会很感激任何帮助，我自己尝试并在谷歌上寻找，但无济于事。 New-ish to filters in CSS, appreciate any help. CSS 中的过滤器的新功能，感谢您的帮助。

Answer 1

I think this is what you need:我认为这是你需要的：

https://codepen.io/ycw/pen/NBjqze https://codepen.io/ycw/pen/NBjqze

HTML HTML

<h1> 
  <select id="elStyle">
    <option>original</option>
    <option selected="selected">char</option>
    <option>dots</option>
    <option>emoji</option>
    <option>line</option>
  </select>
  <select id="elSample">
    <option selected="selected">cat</option>
    <option>face</option>
  </select>
  <select id="elKernel">
    <option>3</option>
    <option selected="selected">5</option>
    <option>7</option>
    <option>11</option>
    <option>19</option>
  </select>
</h1>
<div class="frame" id="elFrame"><img id="elImg"/></div>

CSS CSS

body {
  display:flex; flex-flow:column nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

select {
  margin-bottom:0.5em;
}

.frame {
  position:relative;
  width:90vw;
  height:90vh;
}

.frame canvas, .frame img {
  object-fit:contain;
  width:100%;
  height:100%;
  display:block;
  position:absolute;top:0;left:0;
}

#elImg {
  opacity:0;
  transition:all 1s;
}

#elImg.show {
  opacity:1;
}

JS in the pen. JS在笔中。 Too much code.代码太多。

Answer 2

You should use the image with div as background, not as img tag.您应该使用 div 作为背景的图像，而不是 img 标签。 Because you will have to combine it with sepia filter and dotted image.因为您必须将它与棕褐色滤镜和虚线图像结合使用。

 div { height: 135px; width: 180px; filter: blur(0.5px) grayscale(100%) sepia(1) brightness(.8); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=), url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg") 0 0 / contain no-repeat; }

 <div></div> <p>VOLVO 740 TURBO, red, Mitsubishi turbo fitted to Volvo engine £2,300</p>

如何使用纯 CSS 在图像中创建半色调效果？

问题描述

2 个解决方案

解决方案1
1 2020-06-21 15:08:42

解决方案2
0 2020-06-21 11:38:01

如何使用纯 CSS 在图像中创建半色调效果？

问题描述

2 个解决方案

解决方案1 1 2020-06-21 15:08:42

解决方案2 0 2020-06-21 11:38:01

解决方案1
1 2020-06-21 15:08:42

解决方案2
0 2020-06-21 11:38:01