今天打开爱奇艺的网站,好奇的打开了一下控制台检查元素,发现这么一个情况:
在爱奇艺网站打开的控制台居然有图片出现诶!
那么,该如何输出这样的团呢?
如何在控制台如此为所欲为的方法
语法
console.log(%c字体 || %c, 样式);
(技巧一)输出字体
例子 >>>
console.log('有红色字体样式的输出--》%c加油,5G时代即机遇!','color:red');
我们再来输出个大胆点的样式
console.log('有红色字体样式的输出--》%c我梦开始的地方——蝉壳,感谢蝉壳两年前带我启程\n','background-color:blue;color:red;border:1px solid #ccc;margin-top:10px;font-size":800');
(技巧二)输出图片
console.log('有图片的输出如下-->>>\n %c ',"background:url('https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1');background-size:100%;font-size:250px;background-repeat:no-repeat;");
console.log('CSDN');
(技巧三)字体图片混合输出
console.log("%c 纵使方舟孤独渺小 \n 征途永是星辰大海 ", "color:white;font-size:41px;background:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3125190056,2244508091&fm=26&gp=0.jpg')");
(技巧四)其他效果
另外,最后知识点总结:
一个字符的空格宽度可以拉伸单行的图片长度,如: