在网页设计中，图片是非常重要的元素，它可以丰富网页的内容，提升用户的阅读体验。而CSS的图片绘制则是实现网页图片的一种重要方式。今天我们来介绍一种非常有意思的CSS 图片绘制方法——由素描绘制图片。

.sketch {
background: url('image.jpg') no-repeat;
width: 500px;
height: 400px;
position: relative;
}
.sketch:before {
content: "";
background: rgba(0, 0, 0, 0.05);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.sketch:after {
content: "";
width: 500px;
height: 400px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.sketch:after {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
background-size: 10px 10px, 10px 10px;
background-position: 0 0, 5px 5px;
}
.sketch:before,
.sketch:after {
background-repeat: no-repeat;
background-position: center center;
-webkit-filter: invert(100%);
filter: invert(100%);
}

我们可以看到，这段CSS代码利用伪元素实现了素描风格的图片显示效果。其中，:before和:after伪元素通过设置背景色和多重背景图，实现了素描中的线条和阴影效果。而.sketch:before和.sketch:after中的滤镜则将图片反转显示，这样就可以具体展现出素描效果。

细节处理方面，则需要注意背景色和背景图的设置，以及线条和阴影的颜色和粗细。通过不同的设置组合可以实现出不同的素描风格，让页面呈现出独有的美感。

总之，由素描绘制图片这种CSS效果实现方式非常有趣，不仅可以给页面增添美感，还能为用户带来新奇的体验。感兴趣的朋友可以尝试一下哦。