用CSS box-shadow画画

原理：找一幅画，每隔5 pixel取一个点的RGB，在CSS中用box-shadow描绘出这个点

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>

复制代码

效果

下图并不是图片

posted @ 2015-12-23 23:56 Create Chen 阅读(5565) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步

编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）

阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库

历史上的今天：
2013-12-23 中国天气网的数据接口研究