如何使用纯 CSS 在图像中创建半色调效果？
[英]How to create halftone effect in images with pure CSS?
问题描述
这是我的 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>
我想要尝试做的是使图像既有灰度又有点 - 就像打印页面下面的图像一样。
仅使用 CSS 而不使用 Javascript，如何在我的 HTML 中实现此半色调：
除了灰度过滤器（原始图像在此扫描中具有棕褐色）。
我会很感激任何帮助，我自己尝试并在谷歌上寻找，但无济于事。 CSS 中的过滤器的新功能，感谢您的帮助。
2 个解决方案
解决方案1
1 2020-06-21 15:08:42
我认为这是你需要的：
https://codepen.io/ycw/pen/NBjqze
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
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在笔中。 代码太多。
解决方案2
0 2020-06-21 11:38:01
您应该使用 div 作为背景的图像，而不是 img 标签。 因为您必须将它与棕褐色滤镜和虚线图像结合使用。
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>
JavaScript/HTML/CSS 半色调线条效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.