css背景图透明化，文字需要正常显示

最新推荐文章于 2022-01-17 22:00:22 发布

浑浑噩噩撸代码

最新推荐文章于 2022-01-17 22:00:22 发布

阅读量863

点赞数

分类专栏： H5 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_42315964/article/details/108363322

版权

H5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.伪类添加

2. cross-fade属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .imgs {
        line-height: 300px;
        text-align: center;
        font-size: 30px;
        position: relative;
        z-index: 0;
        width: 500px;
        height: 300px;
        border: 1px solid #000;
    }

    .imgs::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: url('./img/timg.jpg') center/contain no-repeat;
        z-index: -1;
        opacity: .5;
    }

    .cross-fade-image {
        width: 300px;
        height: 300px;
        background: no-repeat center / cover;
        background-image: -webkit-cross-fade(url(./img/timg.jpg), url(./img/timg2.jpg), 50%);
        background-image: cross-fade(url(./img/timg.jpg), url(./img/timg2.jpg), 50%);
    }
</style>

<body>
    <script src='./dist/app.bundle.js'></script>
    <div id="app">
        <div class='imgs'>
            多年以后
        </div>
        <div class="cross-fade-image"></div>
    </div>
</body>

</html>

浑浑噩噩撸代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css背景图透明化，文字需要正常显示

1.伪类添加2.cross-fade属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg.
复制链接

扫一扫

专栏目录