如何使用純 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.