如何像愛奇藝一樣在瀏覽器的控制檯爲所欲爲?

今天打開愛奇藝的網站,好奇的打開了一下控制檯檢查元素,發現這麼一個情況:

在愛奇藝網站打開的控制檯居然有圖片出現誒!

那麼,該如何輸出這樣的團呢?

如何在控制檯如此爲所欲爲的方法

語法

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')");

在這裏插入圖片描述


(技巧四)其他效果

在這裏插入圖片描述
另外,最後知識點總結:
一個字符的空格寬度可以拉伸單行的圖片長度,如:

在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章