css特效（css文字元素剪切显示背景）

今天来分享一个用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;

}