用CSS box-shadow畫畫

時間 2019-11-06

標籤 css box shadow 畫畫欄目 CSS 简体版

原文原文鏈接

原理：找一幅畫，每隔5 pixel取一個點的RGB，在CSS中用box-shadow描繪出這個點css

Python

from PIL import Image

if __name__ == '__main__':

    with open('C:\\css.txt', 'w') as f:
        im = Image.open('C:\\sky.jpg')
        for x in range(0, im.size[0], 5):
            for y in range(0, im.size[1], 5):
                line = '{0}px {1}px 5px 4px rgb{2},\n'.format(x, y, im.getpixel((x, y)))
                f.write(line)

HTML

<html>
    <head>
    </head>
    <body>
        <div id="painter"></div>
        <style>
            html{
                margin:0; padding:0;
            }
            #painter{
                width:0px; height:0px;
                position:relative; left:100px; top:100px;
                box-shadow: 0px 0px 5px 4px rgb(100, 105, 108),
0px 5px 5px 4px rgb(130, 163, 170),
0px 10px 5px 4px rgb(177, 180, 137),
0px 15px 5px 4px rgb(102, 119, 145),
.................
895px 555px 5px 4px rgb(32, 23, 28),
895px 560px 5px 4px rgb(32, 16, 17);
            }
        </style>
    </body>
</html>

效果

下圖並非圖片 html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。