css将字体放在背景图层上

CSS可实现将字体放在背景图层上，实现效果更加炫酷。以下是一种实现方式：

    body{
        background-image: url("background-image.jpg");
        background-size: cover;
    }
    h1{
        font-size: 4em;
        font-family: "Helvetica Neue",Arial,sans-serif;
        color: #fff;
        position: relative;
        z-index: 1;
    }
    h1::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: inherit;
        z-index: -1;
        opacity: 0.6;
    }

在实现中，首先给body设置background-image，h1设置相应的字体样式，给字体设定position:relative和z-index:1，确定字体在背景图层上。同时，在h1中使用伪元素::before，设置相同的background-image，将其z-index设为-1，同时opacity设定不影响字体的属性值，实现固定在背景图层上方的字体效果。