其他
【每日一练】54—CSS实现蒙娜丽莎的马赛克艺术画
写在前面
今天这个练习，是我在国外的一个素材网站上看到的，我个人觉得很好玩，所以，我把这个源码分享出来给大家，大家可以看一下最终的效果。
接下来，我们一起来看源码吧。
HTML代码：
<!DOCTYPE html><html><head><title>【每日一练】54—CSS实现的一个有趣的像素艺术画</title></head><body> <div class="box"> <img src="monalisa.jpg"> </div> <div class="box pixel"> <img src="monalisa_pixel.jpg"> </div></body></html>*{ margin: 0; padding: 0; box-sizing: border-box;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;}.box { position: relative; width: 400px; height: 600px; margin: 10px; background: #000;}.box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.box.pixel img { image-rendering: pixelated; filter: contrast(1.4);}.box.pixel::before { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1000; background: repeating-linear-gradient(0deg,#0006 0%, #0006 4%, transparent 4%, transparent 96%, #0006 96%, #0006 100%), repeating-linear-gradient(90deg,#0006 0%, #0006 4%, transparent 4%, transparent 96%, #0006 96%, #0006 100%); background-size: 10px 10px;}写在最后
以上就是我今天跟你分享的练习内容，希望你会喜欢今天的【每日一练】，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号