这是我的CSS代码:
null
<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>null
我想尝试做的是使图像既有灰度，又有点--就像下面的打印页面的图像一样。
只使用CSS而不使用Javascript，如何在HTML中实现这种半色调:
除了灰度滤镜（原始图像在本次扫描中有深褐色）。
我将感激任何帮助，我一直在尝试自己和谷歌，但没有得到与此。 对CSS过滤器的新知识，感谢任何帮助。
您应该使用带有div的图像作为背景，而不是作为img标记。 因为您将不得不将其与深褐色滤镜和虚线图像相结合。
null
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>
我想这就是你需要的:
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在笔里。 代码太多了。
