刚刚发现一个比较好玩的东西
在console里边加图片, 然后试了一下果然可以, 先放下源代码
console.log(
"%c ",
"background: url(https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lpqpflo/ixigua_logo.svg) no-repeat;font-size:130px;line-height: 50px"
)
其实要说也不难, 只是在console里边加了一些css样式.
注意:
- 需要用%c, 作为占位符;
- 指令前的文本不会受到影响, 但指令后的文本将会使用参数中声明的css样式;
- 控制台信息的默认行为与行内元素相似. 为了应用padding,margin这类效果, 应当设置
display:inline-block
; - 如果输出的文本中希望包含
%c
这个字符, 可以使用%%c
的方式进行转义
console.log(
`%c hello %c word %c`,
'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff',
'background:transparent'
)
%c
语法可用的属性如下
- background 与其全写版本。
- border 与其全写版本。
- border-radius
- box-decoration-break
- box-shadow
- clear 和 float
- color
- cursor
- display
- font 与其全写版本。
- line-height
- margin
- outline 与其全写版本。
- padding
- text-transform 这类 text-* 属性
- white-space
- word-spacing 和 word-break
- writing-mode