学前准备
  1. 一台电脑及一个浏览器(建议chrome)
  2. 具有一定 JavaScript 及 CSS 基础
  3. 了解如何给 console.log 添加样式:《javascript 给console来的样式》
举3个例子

第一个例子是西瓜视频的控制台,输出一张图片。

javascript页面设计(javascript的console.log也能插图)(1)

第二个例子是bilibili的控制台,玩转了 ASSII-Aar。

javascript页面设计(javascript的console.log也能插图)(2)

第三个例子:基于第一个例子进行改造。

javascript页面设计(javascript的console.log也能插图)(3)

图片用法

无意中看到西瓜视频官网的控制台(没有在推广西瓜视频!)。

javascript页面设计(javascript的console.log也能插图)(4)

可恶,之前居然没想到能这样玩!

言归正传,console.log 是支持使用 background 的。唯一注意的是需要使用 网络图片 或者 base64 类型的图片。我试过用相对路径引用本地图片,结果是引用失败(也不会报错,不知道是不是我的姿势错了导致引用失败)。

由于 console 不支持 <img> 标签,因此用 背景图片 代替。 此外,console 不支持 width 和 height,利用 空格 和 font-size 代替;还可以使用 padding 和 line-height 代替宽高。console.log 添加样式的基础用法,在 《给console来的样式》 有讲到。

以下代码来自西瓜视频官网。

console.log( "%c ", `background: url(https://sf3-cdn-tos.toutiaostatic.com/obj/eden-cn/lpqpflo/ixigua_logo.svg) no-repeat; font-size:130px; line-height: 50px` ) 复制代码

以下代码使用了 base64 的方式。由于 base64 的代码量比较大,所以不推荐使用这个方式。

javascript页面设计(javascript的console.log也能插图)(5)

console.log( '%c ', `padding: 100px 200px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAADICAMAAAApx PaAAADAFBMVEUAAAA2f0Q3iUlRwnRItl4/u2BFwmdGxWY5wl0rvlIhvUVfzXx81o6I255SxnKB7Jqb4K3S8drs9ez/// r5bts0YZJyme96smY1du00/PtPzIJszPtQTPqQzXqRTW11vnrVEDPQzj8uyr4uSn14Ilqy5Hwakz/0znRpxQ0Hgk/LwaIaQ37uzL7why01P2z1fm1ihHxsTkhEwW11fqSvsr2p36t2/zqMCy02f2c4vvvQTAsSCImUCQiUSnlUTGjcRmWSyEnTyMqUyglTRqEt8HgoBn7xRX/2xd9YAtjSwlUPwf/0RXFlhIEAgj/6RjltxT vZQlQBwkRgUtXTUwgkGv2f34uBSUcA6ogQ5yVgqbeg75spj7oJgGNgo6tFs0qFOEQyL/ Rn8nJT nJJSc2ZJqZ9Eheb8mZP/mI1IpMY5ff1BhPdIHQ94PxygVCVTIRH/koWFeFUXoUVAh/xChfRMivNTKxOqWii0XiqXTyT gHVyZU9bakB9t3VBhfZHhOT95HViMxdrNxf9Z1v95IeL8aL5YlL U0XgfXdMjetFhez96WJ4KR3FZyyR76mM7ab/WkmVakuid2CK9KOl4P2ybR to3SP86uP8qb/Uj62ZUvFzXKQ4PmB1/1ZLhSM9KaP6/ O9P V4vqQTCPzeVtLYTD1u2Sh// F9Z2A8JB/ ItEhfVQmVp89ZOF 407crCyz1SX/6JGjf8zXVNHifTV3FM/fMZnlYp6zuSONxCprUfMRi86apFjcJeCc3xbj ChqWlssa386U5Tf3RVfb98vGdcrmVPeEFzhkgPJwpCgtoyYnBvk CxOR6/qkT 5Yj96IWTm0n 5nubxmjsQjX8QTZrSy36Mh3sQzN3o IQTyNAhPLaZVMQEiCEpdL49lBSlP/En7WZsML/9Ez//0///1c0hOCLpLIpd/ttmvqjY3m1oXLPmaHzhVSPj9L59FCjjL72m1WwfqfRa3jNi2PUo4/n0sXFr6qruasOCwWVNyNmkbvMy39nu9CaUCXFOy2wGI/EAAABAHRSTlMAHThhg6XL//////////8T////////7P8LO0n/b/ vTv//kMgy1P////////9iGF// f8orAuI/2yZjVXDnB9hcuL /s7//////////////xdx////ev7/////JTj /// /0xc f5tbnr /4L/// yh6r/// 7/////pD9zabjIYr//5hBIsDeuf9Gk///M0f//8qHkf9nWmv/ MrE9v963Pyp/4z8w/ Sr9TN/5z5/vz///7 v/9/f//Nv////27 qas//7///7J//78/9pWa/97/8n /f/oov6e////6f9Z/MX/// E//3//5b9/vv//v3///////yHnP/9/cbS97f52gAAKxZJREFUeAHswQUBwAAMAKBp/8pPcQcCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALhcVs/uTncGf1BzsGtX243DQACGFbI0I8u1NKZGZYZgmfn9n2kb2HJo0fXRZ7z/j1HyuIABwb1ahRWcU/E4IHDpK6V8GQgE4VXnmFPk5AKFDLWhAaOjWKBIqqygnFKNo1Ca3jMhR GVWRE5lQTA1/SZUQC8ypziqXDkKX1NS Q15hRNlaM0NJJC4aoX8Dr3aZywaNWd8qTmveqFeq47WYKSJlHIy8wpjBoIQxNJSJhTFPOAKU1mhKiy0ep15nwfnvVpGhHyOTbSwuKSy/5tLCMYmkow9lJfWV1dWltfX1/bYE6uZVm2aRXRH7jUlxa3tnd29/a3G03m5FjWarUFapog1dTHReJ5vYH2col9Ul/Z3u50ugc7rnrOmx8eHqEcHTs19CyykvqUBUAAEIIP61fe1O9uN7a3G91uo9E4ZnnlZIfL7U0b0gfGUE/KrYWQKLQoaUCnUahiGXDBB2ov0etLjb7t3m6N5Za70OfbJwGm9E4qAQJNpAGVEjYlKTg39J6Jet298mvy063txiuWX 5CPzsXw6BGybiXP0IMAgualPWJIhsTmQA0vRdJwb0Ke3Gx Bo9F5f65dXVdZl94jxf6Gc/H laWLQ2JAp6u9gqinonaS86SZu T85RJBX21s3CUuPV1E/15u1d87b57Pbtvjncs9kcvya/f7i6un 8Zp 5u/vZ2RPG1COt0hGgIQ5m2FoTUWAjIvJtSK ioDeFKmMfvRb/wa5ZbjeONGFY37ebYwiOg15mgwKy5yTHWaaoRZFCttwK2gPhYWZnmJmZmXmubqvM2VhZX4CeH4KZ5NeTqn5V3R3FlnoTT4QOUZKJzAdZIhOlUyG8ynZqcJV8Mlgv3nhrF9CaFN/d0wsxs6Tvr59LMHTMxpIe/j49jrN/Cq5roaIrnLieOyuqkVqUj1GuPG/Jh5OTBQ9LBtLKPSLrKbLUAxHeK mCGNU4KlBO06kgKBpLqe71ClQ0ilfe1T A9KP2/sHuj 1Dw0P2vp6 obk93mrvGenlpSDdBsJrobZxzu5KOk 5r8kOahfUOpx1JtXzbdq5QD1FrupNRB JiWxMYSWREI71sypvCH5O1XTRr6le4fdiq7x/IL4IiYN25o/FTMkwYu/9cx7plnSkDOu6HFs51ju l6ZVZ77Z6h1O25KlDGAq3aNInmJXdZ73 by8IBNV8WmExHS/TIgqioQQ2W/gtbhoAM4XjY6OAaOL4l0DgwNp6UN9fw3PlW59pv NohHUbXdlWjk2 vqUc8DlSEf8cmfF MTEJFOQb9LNnfPkB/gGxOQXiD41vUzVJS/hJMpqRJeoEZGpRDlZE0WqkOjy4no7OB8bW4GMjfav7IXd4lXDSf7ss6TPWdS/xPSe7xxUlyVfaqDQ62EaU47B3fHpgrT0JROr16xZW9BiUyrEUbwCkS403rwQaS7kvZXX1q3fsDFCfFQUCM8KogEdnUqKygmipBFDEKn2K/PfdA3ER0H5JmTFWHzzFobZmpI ZEkvUOoLw5kirkk5h5kM3F2Q2sGwzQ6fcTZMcuWpH6p1jk sAbZtN5PuMVhPWvoOBpS7v0TcoH1uoas0OJ1YN0M4JeongERVQjQfB9dku1dZP/k22y7mbe7ofCewaRNIX5mT3ttrSf83zc1fYngDXHYnXFMfb7Yy26cVLhjT2CvKyqvy5jIumx2lIwUc7EpKZ3VPptSbGfeXLaFQOBxq dI9x/qvstc3nUgkphTCsn7KySrrE7yyLPpZjWh 0YionI9y34Hxyt1AZWWDmfT4aNL5nr179 zct2mW9D8t6XPAndWq1LJdUV9VVmqvr3aVOj911LpyM/gcCxy2/SnpBwp12ZR0Iyv9YMOXoXAbEg7Ntf4toYcOb9iwYf16kEsUKoD3qEBFr8zCVdMEgbKyl25hGnYfOQocObK7sPZWKHRwvucY8vXx45tPzC/dks6cTCc57OSwg1aPbhe4zI7ELjF1DgTyKx2tt3wZbjuVpC305cJmJp/voIWPTCOJ00ToUGVvUFGJHA3ycBX8cOElGiNyxxnm6NlzwNmjYL3wko7S95w/luQCSG/NSu zpBc IZcarFfVVtWA7HmpSC/pB8y/2TxRNif9Ykvbqfb2S5cvnToVBusNswtdnEqsuwKsuyIrEk9U0WfwKu XonLMG6SKHIsGWY0Q9ujZq0lAO1g3q/S9Oemb 3PS/yok3aL4kzP1TtuaCXPnIB0IULymrbeF29uvXb9 captvBs6U2Em9qwPsXNwzFRMlhOo4IheDURrpoisoYeMSir6xfPnkxy9SpYbzBZ0zft3Jt0vnfnplu34znpg0cswwU46oS4XhSlzpLJ1Snn5h/qHprX3 E26/dvXv3 iWQ3uLO7 8BWZpetjHFzRFeo1ynphKNBokqa34pRnhvUIcr19mhovF79 6B9rNHKgt po ObdqEOW4vOF80cHtlXqW7C4wKLLZXOMuLLfRKZtLceTq d/gDOeunbly/C2B/b8mPck1qNJhYl2FKUHVdFA0 xvkETo7pEOOJSv2sBu1ejF68ev/BfbR 9VzBUsfZzAqwjmzaNNq18q9Z0pubcVKQnyMtHj4q8jiszVGCfyOMOYGkdc7n9WRX9Uvo/Dq099nSI/y6kZtZRqYjfFDTqCCwvALXqBylAlVkFq4Y4x8/efLkwWOwjtJNJnKZ4cxovKt/sP9cNsi5GbcbJwV5owKLpU97KhwVRTgvx0KfHxzPoHU/i6flkMil6yi9/V/t/ceYfuXw hwbT6t6FPs6jcmy18epMsT4iCrzgp9AgH/2HADrJv0dVvX0HBaG7/GBLmbLHx8Pp6X3frmwJYS0fJm1bvHiz5evbM7yYs4/5x2bmH/PJUBFlguAeI/8 npyST/Vlp/efyWaLxncEzMziSvIlCJLXhKLduoaidGgwRMi TlZjQQpNHquImn93j0T6Uxql200tcuGe6t99rT0l6Evw2GcFORGBRaTb3rerB63OavmV47T2ZIitj4y26sdugCwumG8ffcOnYdD7pz0L2L61Pvpmemb01euzNyEh/eJm6rhMwxd0ymrRzVKDUHxQoynXozx7z g9CePUXrD/Pvp/cljFCsHh1LSHy0Ot7ThrAC0Z0YF/7B35lFNnvkef7XTsbPZ2Qc9QtNThiHJuTWmprigd0hKdhMWJQsThJZuGDilIGClQCgugGsXWqWlXjF2caEnoBa3UKlAgZYQidi4L1VatKvb3e/3ed43bxLH7f7b9HtO3xOW9uTwye/3/NanP8nVKncV5T35yztQ/wuumWKYu6dOh6GTJWarae2Tj817NfQvLmP2qIx7a/cVlK3Ml86ZI3WsXFm6370vWaWRCCU5OqNVaoSjtwjh1 O1GgTweqHVsJ1Cf WNVXc1OcOkJLGmPm5r7mNADk3no4qf9FSxYq rmFC/rYf/I5hH3eXUG9w6NwutV8LBK3dNn3dDGfahHM1ed 2 dsccKnv7/travdU69F2kEp0qRyuCR1dKLXD0 jlw9DmmORIDmI//6 uv3/Ozn936SkMZT5/pUGzNgqGP3wV99OaGDW9Onx4oFfykLS1pxa7i4ry8J293/8ivf3m3zCHZvzw05W9TphzosHVWZZBcHYFUWMNloiFeus/9cW3rHE5298fufXaJQWOJt1jMJrNeo5aoJRLEBWK9VWPFU205uP1XXV1/7Zany9NsiWNuPzgVWxPb2N3T1ZXVxUJ/C7Hkho1s1sj8pEpXa7qrqJijft/NXfxfxv8/7xmaNImJYZhPOhlmM6E eUJ4axWG3r6vF5wD0Pv6P 7d92mBSoLYXa8RwswlIg0qNWahKUcXb5LG5 gkn73X1bU1/V649/tTFfKZt2EeWzPgGWg82DN4sKvrVwT6h 8E0safoBMtKFL0wdChvNVL/pz1y/F/DLV2fvchJG4fczfQJzIxs2faHs MYg4oYerMw6FDFBNRgWkm0PeGQW vfs1g0RsMGKmARzdKzXD0ZqlehWCe9NZ1HX/d2h14G6lpY5nKyrrKyptAjx3weL2exkOHBg8ePPinXbs2TuWgv4UMIgh99p49e2bLItO796a1uIrb2tryKugVUxiB w3ZX OvjPzteCAPDELOTLRBijstEcyOGRqK9h12Dg8fiVmOoz1jQngFxyASOuDeQ6HD7JtK7EajyKo3oTZnjRdbxRYznha4ebFVI9abxJ7cTiaKc1CtigoXHeZY FQ4eNi5x1tV5QX03YOHCPRXp9GiIKBPD1j6xEkxR6KJjgzFTJoded69RVHrqoXyPmegJfeOuw Q//Sb3/7xj2RpDR C 8bdO5ZDbvPndjY03NMpv 2hOnFo2Ocb9g37Fw0T ZQ6mHqIJuVI5rSXhVl6K7H0glKHJQeDcVqDKt4qEsPRi4X6HKXZIswwZJi1WtXm3AYaqlUuqHC50jgHBR2tIwFpBdUW92MDnqqq vrGQx8cGhw89Otdu6Y/ uqb6PlswKGOMx2uYAaAhyrS7lKoc/XJXW21UPE9DJ1QuP en//5PnY1Ff9gdelnAb6zbJ2ZgRaN3BZ6qFaGaOLQg1SCB9NLBfTVsSlTpjyX XAlp9nJxsP2w6UU nFOfW4KPd eYTRnCPUq4teNeFpEqNEYtBYdTnmhRDf4OOousgXFkGsviT8DwqAm/W5RXl7xCY8XzA/s2HFyxwcU qvzkK9t3Did1ocY5ukjCdE3KiYloo50V2vrqVO1z0Kr7g/Mpdw/Fre9/xybyPeGZkeJtgY8ZRADdYZS//iO2tfS0sK97L3Jj/Ez976SJrtwpcGstaLobhRjaiYeRXeN1ai3kF0Is1qsXvtEJnO6Io9CL05DpslrC1PHvqh1n/F66 vPnvviiy/O7YCD79n16DRujgMZG/PI0DDPPFRPMJGjhYC c TaGf8ZttqUGduqVn fzDIfzMhFEAI9TE3Qt/ZC53n5cZrXr1ElPn52tped20vlZsV7Ly3bV97c3VJs1EJ48a6g9mQYbKI4g3xYo1WaaC7EDqr GnmwshIG6WLNw7ovBYSS3e5XKe PIMT/SyQAzpx8D1d8yZzE1vzHog6nTB8M SChIRNERTHFbUq5HNR7YLeX32ryUNorG1PoNSJQicDlX8SLPCwqvsqTH37g69HR/G48NRTC57qGF2cuz938X6qfZzI67VlZc1NzaUGs9UAv47tNpVKJIZzZ929hATwqoc LwpQdu2VF GLoIC8d2/f3o/PeDwHTlLoJz/44FBPd9dkbHTMo7OZURdvauYCooSXImZAro1A3wri0Pb3mJtBr6Pqy808ffrpi6yePn369IQLtjqqymCENhymtE DrzMM64aHYxhIpxS2r2yyr6gmcjjQbcGD/aK6pKQ0X6/SWo06NdYdlEaN1qLHIJUFvXWr1mLCt1tOtQUQtyjOu8KYF7emKeTpzp7G sEd1NDB/NBB59YJUdwUNnNx KbI4 LiLsXFRb/AyCIjeC8qvqOlb6ERkstVVOvu/5pVf39tcV6RnD1Un K7pb7oUPnkh/lvJERfEpAEiQzGqec0lzlK8qs55eNV4GVTSWl2icEsFGPdQU/XHcxqjUanM6m1YhW2GjX6KUFL36noDYGOr9MULcWuNveunsHBD74hJzoLXbGKYfctmNM32nlCQkK0AMRZCZ5jUiIEenrfzp0fbd OZsZqTJYzN4cOtRHk33L6ut9dS J guBoIFOLDteyw/KYoSNB7EQzZhv0dkd2WVP yrJ/1srmpoJmOHOxUQsXr0oWxqt0BrNIhyfJ43Q65HFnRoLQtyxcuLCCN/y0Vhc mW2uN72Dg4M7zsK3gzncuyKRW5V4OPw8PxIzY9OmpQIBmH9HdSlugJFFBHTYK4neP3r27Sgwj7ol9LZajvn333PUT3H dSFDJQsjPoSSx0w/vjsxJtoXYlrJBs0KQHfYefsOUT7ce7O9GcurJhE8eoZWazJisdFiVhowPqUHepE4viiPS8470xiIJO2EeS/ydtbw 2OrehpJcYYwP9g9N8vWyVAtHb5Jbh77HJhziruEGDUSoLvkfS4uTSfMbw0dhk6QQz8Q7l 7T 1U7HTRbIkqJtSIJjFE8lQG2hMT9PICAyZgSwh0RxOVnVVJE5HDDugl XoDFpbFyNOMSjWEkUm1xaST4KlXWS37qIPfUsekKgKByVGcPulyjnlef2xNT6MH0IH8YJdz7p8LbbR4 3gI8yMTQ p3m7/jqT/HRAL0Yld6n6uNr83cGnqtmxg6Qb5m3Q8Eev pXkVLEPqeUDOfzWX2crZOvsgXgJ4BQy8toe69tLSstL3g8pWrV69euVzQXlCGbxD3jsk5ZbwapXaxEOG6UqOBXzcKTVh60EvjDSplsiuPPVKSkoLZA5x74IDPc6ek9HQMeBoPQl1b5XPvY1JpdpkQYuayQG GqfF6vZvpiM8UOPhLsZEBvTWdLb0Ta7gd9H7K/Ktj69ati4Op3wh9KIQ5n axvTB/6kQfZ gotJUWEEt3LMpuzm /fDVQ4h9tX9Gc3VxNLL05 zWD2qTLSabrDhKpGENUaqnJiMqcCLsQGXvzXAt4P8KpLp1P2kkPwdmREtvRhR7bOKynZ41hPrGFhRxDfOnBX1iDmu2Bb2iwPyVSTL0ikO7mXbgt9DYO jFskdwM uwQ18lAIaY C48Z0VQZKpGwgEIXEs9 jQJffJ08rzbZ8S0KvcCerBSqTWojpqVMJqVZoxabEbqL1XqjBU/zqfO0ESAPLf n7QxAH6nAgFwsI3txflcWmYWd/zw6B4okZmnCjW8wSd7QIO8YYJlDBPqllEgozrha2Mwn7 jtLb2NQv BbA6tO0ahh57poMprD8NrDLFG Sy8OkIMPS7HKqxeRKFXl7a3c2Z fD9r7IvaS/Mp9FJ7c47JahEZyLqDmq476HNUGeI5SgxRaYU5ja1pM0O9O5Qq3xJi6eXpDLfAiEXlrOfRgV9lK1zGQ58YaCUAcE1342e7WeZ/IwG8IBLKsUddtLUKVdzSGYD4yEjeKUId0CGc6TR6px XERq9B/ kMUyI/t0/ZpaNy cSopXKpuwmCr0J0MGcwp5znXvRXpDdRKE3OTKMJqtIrScdFzXm5TRaU0ZOsghhfI4ZWxCyWf7E1DBDT0ysdPEF2bG21QHouIciaz6gM/fYPvXd4NzpdWM1gz2Du88R5t9ModCXRsQMBQnfi4kqmZsLRben6k6f7tv/9MXl6wUE vLlyy9edHMHw8hUkvhE85odXrFXcHCGkK7liEsKWOiI09f IQw6NGovYS3d4SgzmEQGM/Ho2FoWW KVFjyxCyEWm5QSy9 ZsYnysL3EpESGT9gr/LQ fC gZ81XAPpqZskSptP/4LowQx/rlzEDS9et70FST ycMo LPhIB/r2uOFBjQWXttmpI25Tywtr1AsGylzY990TmP9pcfekuaGQyfvhMQniQxCt2ji2TITo9HK0y2mHLLPSSgKED rXAq YmDnp drJOrVTpJFIjfLxJSG6Z02hJGC/C JQyOQW OTENXb AbLOYBQHovQqGQmd3mvBcfT9W25c75woo9SN8lDnjSEICgb77O2xhscyXPhMJZ3pUMZ/tLGTuQF3x8str165dugkXfDwhOw0Xsdd1vndny4sNDbHLBWvWraP cxITqkxbYaEtqbBh9arVnybnWBxlAffuuPyHcOhEl1c0FbDQFzWrzBodidfNOrLMhjBeT8N4k9SUoTL8x78jCZvQafN3PsIQRdlSkYiwKjo/JggdR3pW1hur3nj97cuX53bHCYKfSq5otG599 XvqJCvbfZmRkhvtYgfkou6E/X09MWLl2OPhOwNXTjfopDLFXKns7u7B1oLJ Dz eA8ecmYFIUT/1q5wmZLs3WrkkUFvKULR3nox68GXl4TBiy9zC7OEWmsarq7bImPp7vLGI41WUkYL7Y6qW9/pFOh6DxN5p9IbhjoxFQwHHQIWXrWuLex3f7u6OXR T2gPlxIbzQdisZ7hXwFzrhLlPh3m701EVGQg56Cf1ew/n0BcwdlFi52Ln4ZKizHmaqQt6KR Z8nUN1oRNu6p9vpXBTtk4Uwl5U7a2JrUshI8qoluIJAGwL92k2gX7Xz0EvsKr3FirFYrDtoDWTdAeNTGRiTxC6EWKo7Sy7GwrDlIxfk8tbyC3XkgN8SSNlkAeg40uePGzf 3Tdeefu90dGDW evjRMMv85MDBmX8mU715Am2 YqT01NbGZkMCflmV4uyW1j7qjMhsLycqfTWV6 dydigVOnvuw/4/F6AH3wu0vrnX5/9myeuYwpTPfUeD2egZpMeteISNxcwEfvPOk/ v/C828v4dw7Dv1kgxrrLUYVijQmJdlxI8OxFgzHGgwirXGAIddWTZ4wNRdKV8i7FTY2CWlDRY6RsdE7svSsceN/9e7b777y3mgXBqjnr18Tvfyl0BK8z n0Rce9MFATC aw8wjRQlRi03lTv1s9MELqt7X9J040euurPts9uBsuco2g2e fxRt6h5PUwKswjjwQK3tIqbWIF/GWzhVm6K2zPPSrJbylV9vzjUahnqw7qPVWi0li0ostVqsVo1NmsRnfJtceYjLiI0y1T3j4gqLzxVkEOiko98emwE1T6Onp48aP/9W2V97d9v6vf9UFzT2Gtn54/zd76RP4lHDzQJEixO/YYORP9btURR7xD 7 E2fqq rPfvPNDlK5jlvjW1boTxrDMr/ohP2Tj0SV1xPr1WF7WR2ELh0NTln/4SZnerWwxJSjkeRkmIlfT7YSvx6vFioNSr1GZMBw7MVHyLVV0wH9sWkTHlDgYD aV1yLln//iQHiqAl0HOkwdEDfth0TA7/qGr28da7AF8b8QX7wL0KI8/xIi6roJgG87JaF6KdGTiESaHOfOHG9qv7AuUA9Ky7ax9z/CVtxb3B27B4c3H2gvr6 yjOghKGrg9CbmvjoPURX OgdJTtcJGnUwKNL6LqDWhqPp1ZrxCkvFCtVBuNkMu745ocffrRx3uRp6Zhs7h8B8hMnTpzxkBNF9uLzJGEj0N975X06GHRodPTy3PRgp9fnWzYp1cZEpE6PuHoDk6VPhe AQjd3eiMul4L37ie5dgWgCxIGSH3zX1HqQlW7cXDHN dOArtns84KQw x9Kbmm6zNFTh4S3c0Fax4zSDWSrDuoLZI9HTdwWyyakzxWH7GLoSlYxqY/xtdVpo2tXUCE UuJo7nzJnr7IHyIr0BmkLftp2HHpcu9/kCVl5OqzqRqYUw28AQeV3YFiAUe7M05mgbze4B/UxVFQv9Gw76Jtq9ipXJewa8VTvoeCIcvDJDZIGag2e6/at/Yn7Nbg9x744m9F1EJqEV6w6wczh6jVRnSLaKEMzrTUKxAc6dLq5seHXe1FxcMXIebwfIr1 vgrw1HVlZJGEj7v19Cv3XowS6wM9SPzJjNoY8xkTkJXOwZ Z0cdspOY3loMrQLUBo4CaJzFPFqMy0utBu7b/urQd03r0L2IJXanpSeY0H0 fUBxzwPqRTCy0ajSYIvbqAL8kFY/fm/KClO0oXZZcarIAcT J1i9GQkyFFZzVHT5eZ1UL92Uc3hkL/fMRNmEPkQKkaaBy3FW1VHvr2Xx8i0I ti/b7o31Dk9jibWJSJCLPxExzysXaL9386kAdxxxbgFTADurhzLnYD2dolQfQOUMn0LnStt fUuOtAnSisweUSNeIgmd6fll7wQ0Ovqwd9brS4JmO2 WSVXDkamu8SaJXY69Nj/VlPfy7WmIWY5BmKrV03GwC6I8wbhg6mP/Xf 04e4CEEY3ju9Oz5hP/vu09XFL0/ihlfgxHutz/d4aVXM6EakxEME8hF7Xgnpav 7/MDUTweXUB5lVUoI4ENpw5DD0dv11b/BjQkm2SkxxzQB8izBPlDbH4CdupPnnggOezS3GXLl8uWBSwdOK9HaG2/rvD9iZHuHvHRZJqochkkUqlFrFGKhWqxSVSqeg/X11SV3fB8 jnLPQN03Gm50ZNLqbMr588d 6Lb4Dd24hJqSxi6uO3vb1tGxJ1ML98DG/QNzHVP4vyTZUHBzHGpib6UTlMnPnjZw7kuJHp6Re 3b/YqeCoj2CcgjKHmyQ2Q6iHQD/KLpKx9foaoIUXP1u/mTN0aBKmE5hCeayHbJSdpIe6x3NJIDj2Qwj0kmyMPueP8sZ JduRn5/tCELHL0CO7HxHdXZ2djX3zM9uzx/JQ2aJ/7UYNtTIWuJ0Cn1Cf//XZ65BJ8 xcQSBjpIcqJOKHO4iA3LCHBrCyKY8aVaiXD5zrDxppgwmDuKHD8 cObMzV2H7cWOXgTm9GX/TpvW4OVnLggT1hbEyYsFAdu4soT5Qw5t63RZ2j6zPxX48ahCuEdWjek0MHfL9B7ohKf4G9j9x9uQ3Z73e7 LiQP1YADo3Al3QXnr56tXfY0gOzp6OQAdTNvILN1ftSEUUM4GsKr268a0NdC1xavljpNsP5lf 6xwbR3gae7rBnFB/YzWulX294xiYC9hBbBh5YlISMfcxiXLI7z/8oM83iS0128p/1IYeuBl/6bKVgL6vNS1g621TPR4vmJO/HjH1wKleScw8MHraRsYnMmvYc8CzOQ5c2VQomvjM8vJM6izAnWWOVRIWOhu9VzuImsggLHk4iKpDK3L4hZur1zWyJYqBpQfWEh994EJugPmV//qGUt9d3/h/7J1RTFNnFMfv9rC9zddCHGiCJrygCSLTqdZCebGJHcQmS0vSUCakxg4HWBBVxQCtwyIYLOrG3CpGp4lLW 2iCGYYcRRjNK1SNFqdmdQxTEiWGRC2/7nfxdvbWxrUt4Z/2gbgktzy6/nuOd8955x 6jlDcja0OJ0tTiCnE5TeCiQrX7v2w/VNQWR5NJVwkKF4Q1Ibelk5MW/im6T3RCIeJNEAO21sPToh N5/8NC1vJUDOeRFgGcPo6AdBgdPMOM2efm3bwt2DgUpA/roMGsOgL/eR8zpl4tk0Emd9CKDnpkAetXIuWwuBdR5bU5Pv1bHp2f/AzHqLy9T5aIAHUkUDocDNU3sBJmtSzSTuJl7QJuj5/TDyWvrgqGDOXSscXxwEDT9RN3LBz vX4rQMzKcoT1egXl312Skt9dud0TH81xFVIpxbloGN3wUaz909/TfjDkkXd6lmvvyTuk6VaGU7JRlfBvI9M2Rq61jlJ0tUH/8 DExP/8xgJMcNBliAaeIrksPpEYhD4A5CWfZVG4o0Zpw7jlJDJ2NQ4AOlI3bveELhaoBtxuGTsEPK/E ceLVq/zBqjcVwuGvunzfT0319nYoGhTizh0KSKKp5zaqdlEhwT4gF5hDUkdOJrkjF08DgA7s9hDqUDEpJDRoj/S08hn5EFE//du3J 7cfGPoSIxkyrgvrcFJXZeTsy51YSC6knGRDZO DG0qfTJbutgkvaJk1Gx2D6hg7GH7IEEn5s9ev3r69BHqFSHG3Nd//sYUdKTF6QB1cY9e 2n0P/X PVVwES8BOUkSssWRNGSLrx1i2WI4EomEvV6C/qL1OHJ3Di8l6qcRpe/r6oehS6FTyq5UQ0Ox1au2sgpEMya0Ds9JYuinDh9jjfErkAJlHnEjGsvrDkfI1C8 g6Ej9CXoM2Zu7wfzG6B pgNzFhySopjs6LuWQcvw4iBbMsWf1Vhr91trOl2H6mdZ3vfXWDotNfXGQ/X1OCC vJW8cKERRNBbWyllE9xB/fS uxnXunYz5JC405r2aQIR88ZyBDP4V7TVGbRJSV3olk2N8RvRJb3cZOD01SOV7ip/oerqI1C//MtFYg5L77Wzon9vt r8lA/Ql5w5Iu29rkAiC5eSmysCXjxsDYrf0fOY8uv6zsz6 szObZmzFDBmbsMasC1zhzEzEwfE1f4/3Qw6Ez6NPHQrDx2f4PF/K8ozbhcf7fhGBj0hdRg6mO9kQ75sdWWAnrzeuzDMDF3SKS7bSmwH/HldNwH9zp2/iDkZuhvCj/N8kV nbnyCbc2zZ6LacNPAvZQU3PQYui9iVrmCbz4AFmsNNE0eOnvgGU/1sQd0ynUPI1rqWuuqBOwM gvUWzFLHx vMGhVa7jdMuiJqQN6Y8UpfsjXcUyBGdVqkzVOnxlbiD7pJixoQigOV64b2Y7IgSDkjyJhuPSXuosK8/z2CK7mS1hvXtHUaY5j jIoO8UWDMp6EgD6l8xRq3W5hAee8RR7AMoaZbrFJEL3Rnp6xmy2h4D kGorTdyu4py40KGFs1Jfais/1ch7OLRVZdMnq6kz6hDG0hpg6BDDbnaHJ32 m6T fo nSJVXmOe5UIVK9qn8M2d56GTqDLoC2WpwoyE0925bfD9XCp20 FbnjlihV2DUSycOkB8zsV4pU99VXlHQw6U9oyYbvPcX4 OArt1ebEBiZDzo0JVAPOIIN8pMO4VIZhGgt mTM0tSHEVcFsWcsG85Zx4xI lxctJ3tdTv8fj93Zeq3JUj5t4VmJgE6NDPAnSy82XiRklpX9kQYZdCT7sybZHJ1W6FRQsvmN5jlR8SP8GrWrymk0Yq/W0Gk42iNiqyG9vOp0B9JHPkxLhczjxg0hoqdh4WoB 3tY0akhU6qJfQ1PGSkti3mLE5NADwpEo3r0rzuVBLg8NJWYas4b4APSs7nZgLjdp8fVzWE4TswaCqVoAeWH0FBlYbK5emQNduVBcU4AVfuTapjbGHKGfL63uwR2Rurn6ya7u ZHRMaIziAXMILcIFye YpqYNSRuRYP9VbyoXxvkdazzFD TOSd4bbaxJWJx3qE15/jwUqj4HVT/YuoXvIrWgBXesQB3MGfQFCjJ02gZfRVqR7/NlUzVB6uqJ4f aAoG01QtBnLROqZyQMLdstC7XtRdYNDorvVg2SqFPK5VXElTmHNz6oJo/M2oNu2E7px8dHIMik10qw1zeeOrC1WkBCCeYmsPc2nJhxlcj4ldycZI6dUY75 RfxQKH8weeOvx3wXtXwNBXAvlPJ388OYWE5NJ0diySkWSqjRZ2ajap23XGdp3FZdSpmzWbJNBBfM4CdG7UPhiJDJYW qvfOYKlUEYSy8yLpGho6QB1YIcfxzvvgE6GvorNZEJGsmc3OxRRk0zKaKpGl46I08NVsMnVrJZAn beQkWAHqoMX/cUFl0YCb17BAvqJOzJsVhmXoKpE3VKSqCAjcJ0Wt1ZXio05cvPL0rnDT1uyuH6iWletLzXwrqblxc0Y4XXaZqNRgE6O0DJvY3oKn7drwJyt/udoWPwvjyWmZdA3dkhDLvld2GzyNJXYV4Gy1f7LL2v HnWB1 g/0QCkaFbN6rVGpDXafivmtU6gj7BJdberVviLO9r rqwi3DJTdmdB98rkYhkivVr56k3ADvUIgwzxzWdoJOlI3dp5cplWX0YA5CYOVvn2zVqjdGi1rhql2vUy43t7a7El/KZW/qcREhuUxXl/e6/VEnIob3vkzJoKIEMsX7tPHXCDhFykuDIYR7Sye/40TjZXNbRzxEmJaY XWvBKk97dNPT1v/ZuwPINsIoDuAvWwwgoHyqQVAElMwxTZImFwBBUgAoCNYQNA2jSzCBiAZFEmgAml1aZINqgZKqOmBjFRigAAA9yL53uSen6e1ksyxJ3q IV4C/993d3Xfv5P43uazj2r4DzkRWo HuFo8MXFUjUTUMJUwcafDnbFOu2UTsPp8QVI4v2eSVOn1xz52ivAoryP4Dzsp0bU4LuJJOqGrC/LJIxpM9GM/7/xuKCVww8dZMHU33jcP00 SPI5o0Qal7orLFrQXFk7zpFUgZZoNTx4HqOEWfvmH7D0KnoTKoV01nMlEPWDy2edAasFkQAucDbL3b2rJ/fc3d092zHxelwth1GoCUb5KF3ngRYDNKXY6FQDJyATBlp4fdOp1Ux5kf9LT9qjATrw5o6OXMG51jR9NETmnHjPw6VS4GXwt2JU3TsPtxvO1/OaIzIf mE8eYlVNdL15R5UIrvIDGY6EssLm2XasNFYiHdH8oT5ULUbI2YtvQoCQ0ADbXrlKBVioNRiuXan2jyo3QHg8mQr9PWof0Q2DzzdBrNX0IxqW0B/FR5e7h8f2z1b1Hq/s sDlntIqh7zJ0bPE7s/IP3W8Dgvf 52PBjsaclrLA5h2mHcrBhr8Y9A p s1jnop5vx SXvFgT52 tDsoA5t7Ru1Sr32AeKB2GhiOqj1wgE/26uaTvWP1Nd2GtzL/ksGL9kWInNEZXByX9zxVTm1ebzSbo2f4u68BVfcPtZKMvHSdwV1ybDHEg7o/mIeY7HR9g6oXCcy8fYIa7VsvCPp/WUA0Ewa2MNZzeiBnAPzIBQMx2JFV0XDejWlt0er0b9/Yb/tFOPOForSCKZw/Fg74DapcNmOeb3b7fdnqJJ1csNl/zMDrcyl2Za8m2bZdr/X73e6u1zfaNaOqUVgwbHs7Zq8 xZwbnV6rWetuNj qyaOjSEJVI0vb5qxivlUzmu960Wm368feo8RdNOyB5cah4yBnDP3krN2owPLjnfZNedpuNTpNQlhijE7k8DTu4vP4nfjlxsTooN7pnJ9ZI0849JVodUwd0cST5cetfmzdhm238QU6WA2cer3RRI16ZZUWd35rUqI36FYFxy75VityJiSO/Fd7cEgAAAAAIOj/a28YAAAAAAAAAAAAAIC1ACsiDPc/5jj9AAAAAElFTkSuQmCC')` ) 复制代码

玩转 ASSII-Aar

B站的玩法:

javascript页面设计(javascript的console.log也能插图)(6)

B站的玩法相对简单,输出字符串并修改字体颜色。唯一需要注意的是转义字符!!

我模拟一个(时刻注意转义字符 \ 和 ` 等)。

javascript页面设计(javascript的console.log也能插图)(7)

var ascii = ` _ _ _ _ __ __ _ _ | | | | | | | \\ \\ / / | | | | | |__| | ___| | | ___ \\ \\ /\\ / /__ _ __| | __| | | __ |/ _ \\ | |/ _ \\ \\ \\/ \\/ / _ \\| '__| |/ _\` | | | | | __/ | | (_) | \\ /\\ / (_) | | | | (_| | |_| |_|\\___|_|_|\\___/ \\/ \\/ \\___/|_| |_|\\__,_| ` console.log(`%c${ascii}`,'color:#e59de3') 复制代码

推荐几个制作 ASSII-Art 的网站,都不需要科学上网就能访问,只是访问得有点慢。

asciiart - 可以制作图片的

lunicode - 制作英文和数字

patorjk - 制作英文和数字

1lineart - 制作符号表情

背景渐变

既然支持使用背景图,那就试试能不能使用背景渐变。

background-image 支持几种渐变方式。如果还不清楚怎么使用渐变,可以补补:CSS3 渐变

这个例子使用的渐变代码稍微有点复杂,直接复制回来的。出处:CSS3 Patterns Gallery

javascript页面设计(javascript的console.log也能插图)(8)

console.log( '%chello world', `padding: 10px 40px; font-size: 24px; font-weight: 600; border-radius: 10px; background-color:silver; background-image: radial-gradient(circle at 100% 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 10%, silver 23%, white 23%, white 30%, silver 30%, silver 43%, white 43%, white 50%, silver 50%, silver 63%, white 63%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent); background-size: 100px 50px;` ) 复制代码

最后推荐几个实用的背景渐变网站

standardista

CSS3 Patterns Gallery

bennettfeely

Flags with CSS3 Gradients

,