今天來分享一個用css做的一個小特效：加上背景圖片之後文字部分顯示圖片，滑鼠懸浮時首行縮排五字元並出現愛心圖案

 

 沒有圖片的樣式是這樣的：

這個是我寫的一個css文字元素剪下顯示背景的一個小特效，加上背景圖片之後文字部分顯示圖片，這裡我設定的淺色顏色，如果深色效果會更加明顯

接下來分享一下這個效果的一個實現過程：

 <div class="backdrop pic1">
        <p class="text lizi">慄梓</p>
    </div>

    <div class="backdrop pic2"
 
>
        <p class="text fight">fight</p>
    </div>

    <div class="backdrop pic3">
        <p class="text go">gogogo</p>
    </div>

.backdrop {
    background-size: contain;
    background-position: center;
    margin: auto;
    margin-top: 40px;
    width
 
: 75vw;
}

.backdrop.pic3 {
    background-image: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.YjaaJzEvFu8PwlF56ahOzwHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7");
}

.backdrop.pic2 {
    background-image: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.YjaaJzEvFu8PwlF56ahOzwHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7")
 
;
}

.backdrop.pic1 {
    background-image: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.YjaaJzEvFu8PwlF56ahOzwHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7");
}

.text {
    color: white;
    border: 4px white solid;
    /*給文字加白色邊框，呈現立體效果*/
    mix-blend-mode: multiply;
    /*mix-blend-mode:CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合;有mix-blend-mode:multiply;mix-blend-mode:normal;mix-blend-mode:hard-light;mix-blend-mode:difference;這四種*/
    font: bolder 12vw monospace;
    /*monospace等寬字型，每個字母都一般寬的字型*/
    text-align: center;
    margin: 0;
}

.text:hover {
    text-indent: 5px;
    /* 然後設定當滑鼠懸浮的時候首行縮排五字元 */
    transition: 0.5s;
}

.text:hover::before {
    display: inline-block;
    content: "❤";
    /* 當滑鼠懸浮的時候在文字前面加一個愛心符號 */
}

.text.lizi {
    font-family: "Alfa Slab One", cursive;
    /*設定自己喜歡的字型*/
    background-color: rgb(68, 17, 25);
    /*設定喜歡的背景顏色，深色特效顯示結果更明顯，淺色會更美觀*/
    outline: 4px pink solid;
    /*設定外邊框的樣式*/
}

.text.fight {
    font-family: "Bungee Shade", cursive;
    background-color: lightblue;
    outline: 4px lightblue solid;
    font-size: 10vw;
}

.text.go {
    font-family: "Jacques Francois Shadow", cursive;
    background-color: lightpink;
    outline: 4px lightpink solid;
}

.backdrop {     background-size: contain;     background-position: center;     margin: auto;     margin-top: 40px;     width: 75vw; }
.backdrop.pic3 {     background-image: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.YjaaJzEvFu8PwlF56ahOzwHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7"); }
.backdrop.pic2 {     background-image: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.YjaaJzEvFu8PwlF56ahOzwHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7");  
.backdrop.pic1 {     background-image: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.YjaaJzEvFu8PwlF56ahOzwHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7"); }
.text {     color: white;     border: 4px white solid;     /*給文字加白色邊框，呈現立體效果*/     mix-blend-mode: multiply;     /*mix-blend-mode:CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合;有mix-blend-mode:multiply;mix-blend-mode:normal;mix-blend-mode:hard-light;mix-blend-mode:difference;這四種*/     font: bolder 12vw monospace;     /*monospace等寬字型，每個字母都一般寬的字型*/     text-align: center;     margin: 0; }
.text:hover {     text-indent: 5px;     /* 然後設定當滑鼠懸浮的時候首行縮排五字元 */     transition: 0.5s; }
.text:hover::before {     display: inline-block;     content: "❤";     /* 當滑鼠懸浮的時候在文字前面加一個愛心符號 */ }
.text.lizi {     font-family: "Alfa Slab One", cursive;     /*設定自己喜歡的字型*/     background-color: rgb(68, 17, 25);     /*設定喜歡的背景顏色，深色特效顯示結果更明顯，淺色會更美觀*/     outline: 4px pink solid;     /*設定外邊框的樣式*/ }
.text.fight {     font-family: "Bungee Shade", cursive;     background-color: lightblue;     outline: 4px lightblue solid;     font-size: 10vw; }
.text.go {     font-family: "Jacques Francois Shadow", cursive;     background-color: lightpink;     outline: 4px lightpink solid; }