---
# System prepended metadata

title: 圖片取代文字(h1)技巧
tags: [html]

---

###### tags: `html`
# 圖片取代文字(h1)技巧

有時因著seo，我們會希望將Logo圖片設為h1主標題，應該要怎麼做呢
```htmlembedded=
<h1>sabtina</h1>


h1{
background: url('./image/logo.png');
background-repeat: no-repeat;
width:3200px;
height: 300px;
}
```
此時我們會得到以下圖片:
![](https://i.imgur.com/XKA2MKT.png)

接下來，我們只要加入下面三樣css
```htmlembedded=
text-indent: 101%; //強迫文字縮排至原本的區域外
overflow: hidden;  //將超出範圍的內容隱藏
white-space: nowrap; //不換行
```
就可以有圖片取代文字的技巧囉
![](https://i.imgur.com/5bwROHL.png)
