CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果_鼠标悬浮图片显示文本背景怎么遮住-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28453669/article/details/103212438

本文介绍如何使用CSS实现背景图片放大效果及遮罩层显示，通过调整背景图片大小和位置，配合transition过渡效果，提升网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果预览

点击查看效果
在这里插入图片描述
我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果。
想要实现这个效果有两种方法，第一种方法是控制背景图片，第二种方法是控制插入的图片，我们这里介绍第一种控制背景图片的方法。

背景图片放大

将背景图片定位在中间，然后鼠标悬浮时将背景图放大再添加遮罩层，最后添加transition:;过渡效果。
看到这个需求时我首先想到对背景图片进行放大就可以了。
这时候出现了第一个问题，如果单纯控制背景图片大小的话那么放大时的基准点是左上角而不是以图片中心缩放。所以我们需要使用background-position: center;来将背景图片固定在中间，这时候设置鼠标悬浮时背景图片尺寸放大background-size: 120%;就实现了背景图从中心放大的效果。现在添加transition:;过渡效果就完成了。

遮罩层的实现

遮罩层的实现是先使用display: none;将内容隐藏，通过’>'子元素选择器，在鼠标悬浮在图片上时选中遮罩层并将其设置为display: block;显示状态。

HTML结构

<body>
    <div class="banner">
    	<!-- 遮罩层 -->
        <div class="fixed">
            <div class="banner-btn">点击进入</div>
        </div>
    </div>
</body>

CSS结构

.banner {
            /* 设置背景图容器的大小 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-image: url(./01.jpg);
            background-size: 100%;
            /* 固定图片位置 */
            background-repeat: no-repeat;
            position: relative;
            background-position: center;
            transition: 1.5s;
        }
        /* 遮罩层 */
        .fixed {
            /* 将遮罩层隐藏 */
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(30,30,30,0.3);
        }
        /* 遮罩层中的按钮 */
        .banner-btn {
            width: 100px;
            height: 30px;
            border: 1px solid #fff;
            color: #fff;
            margin: 85px auto 0px auto;
            text-align: center;
            line-height: 28px;
        }
        .banner:hover {
            background-size: 125%;
        }
        /* 通过子元素选择器在触发.banner:hover时选中遮罩层 */
        .banner:hover>.fixed {
            /* 显示 */
            display: block;
        }