# 書本模式-logo
<style>
h1{
color: transparent;
background: url(https://s3-web-client.cos.twcc.ai/image/NCHC.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
</style>
圖片用 svg 的效果比 jpg, png 好。
也可以用下面的寫法，但是我覺得比較混亂XD~
```
<style>
h1{
color: transparent;
background: url(https://s3-web-client.cos.twcc.ai/image/NCHC.svg) 10px center no-repeat; background-size: 280px;
}
</style>
```
--
- [書本模式-logo(本筆記)](https://hackmd.io/EtsreUrURjWztBfEW9j4_A)
原理就是把 H1 的標題字弄成透明(沒有消失唷!)，
然後在 H1 的地方放上圖片，所以可以去反白圖片的地方，就能看到H1文字。
--
內部的其他參數設定
- [CSS background-size property](https://www.w3schools.com/cssref/css3_pr_background-size.asp)[target=_blank]
- [background - CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background)[target=_blank]
{"metaMigratedAt":"2023-06-15T16:16:40.930Z","metaMigratedFrom":"YAML","title":"書本模式-logo","breaks":true,"description":"紀錄HackMD的一些模板設定","lang":"zh-tw","contributors":"[{\"id\":\"4153fb36-7244-4e02-9387-f6edc28099d3\",\"add\":1889,\"del\":780}]"}