寫在前面
今天這個練習，是我在國外的一個素材網站上看到的，我個人覺得很好玩，是以，我把這個源碼分享出來給大家，大家可以看一下最終的效果。
接下來，我們一起來看源碼吧。
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> CSS代碼：
*
{
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;
} 寫在最後
以上就是我今天跟你分享的練習内容，希望你會喜歡今天的【每日一練】，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。