<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***

.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***

<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>