css3-遮罩透明滤镜文字效果

css3-遮罩透明滤镜文字效果

案例知识点：

英文字母转大写

text-transform: uppercase;

垂直居中显示

position: absolute;

top: 50%;

transform: translateY(-50%);

文字阴影

text-shadow: 0 5px 10px rgba(0,0,0,0.1);

盒子阴影

box-shadow: 0 5px 10px rgba(0,0,0,0.5);

设置图片元素与父容器背景（黄色）进行混合，图片会变暗

mix-blend-mode: overlay; //叠加

预览效果，如下所示：

html:

    <section class="con">
        <h1>this is my life.</h1>
    </section>

css:

   <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            font-family: Arial, Helvetica, sans-serif;
        }
        .con{
            height: 100vh;
            background-image: url('./img/bg1.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }
        .con h1{
            width: 100%;
            color: #fff;
            font-size: 10em;
            text-align: center;
            background-color: rgba(0,0,0,0.3);
            /* 让h1在.con容器中 垂直居中显示 */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            /* 英文字母转大写 */
            text-transform: uppercase;
            text-shadow: 0 5px 10px rgba(0,0,0,0.1);
            box-shadow: 0 5px 10px rgba(0,0,0,0.5);
            /* 设置图片元素与父容器背景（黄色）进行混合，图片会变暗 */
            /*  overlay 叠加 */
            mix-blend-mode: overlay;
        }
    </style>