今天打開愛奇藝的網站,好奇的打開了一下控制檯檢查元素,發現這麼一個情況:
在愛奇藝網站打開的控制檯居然有圖片出現誒!
那麼,該如何輸出這樣的團呢?
如何在控制檯如此爲所欲爲的方法
語法
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')");
(技巧四)其他效果
另外,最後知識點總結:
一個字符的空格寬度可以拉伸單行的圖片長度,如: