---
# System prepended metadata

title: 如何將文字的背景設定為圖片

---

<style>
.image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image p {
    font-size: 4em;
    background-image: url("https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
    background-size: cover;
    background-clip: text; /* 2021/10/06 only work on edge and firefox*/
    -webkit-background-clip: text; /* so need to add webkit prefix */
        /* background-position-y: -250px; */
    background-position: center center;
    color: transparent;
}
</style>

# 如何將文字的背景設定為圖片

只要在文字設定**background-image**後，利用**background-clip: text**和**color:transparent**即可，目前只有在Edge和Firefox能使用，要在Chrome使用的話可以加上-webkit，程式碼非常簡單，如下：

***style.css***
```css=
.image {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}
.image p {
    font-size: 5em;
    background-image: url("https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
    background-size: cover;
    background-clip: text; /* 2021/10/06 only work on edge and firefox*/
    -webkit-background-clip: text; /* so need to add webkit prefix */
    background-position: center center;
    color: transparent;
}
```

***index.html***

```htmlembedded=
<div class="image">
    <p>Image Text Transparent</p>
</div>
```

效果如下所示，codesandbox的部分在最下方。

<div class="image"> 
    <p>Image Text Transparent</p>
</div>


<iframe src="https://codesandbox.io/embed/image-text-transparent-xv73j?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="Image Text Transparent"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>