jquery - 缩放背景图像，但不缩放 html 中的文本

Question

我希望背景图像在页面上缩放，但不显示文本。

CSS:

.page1-box {
    width: 1200px;
    height:800px;
    overflow:hidden;
}
.page1 {
    width: 100%;
    height: 100%;
    background: url('../images/home_page.jpg');
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 5s ease-in;
}
.page1.zout {
    transform:scale(1.2);
}

JS代码:

setTimeout(function () {
    $('.pag1').addClass('zout');
}, 100);

HTML 代码:

<section class="page1">
     <div class="page_container">
        <div class="text">
            sample text here
        </div>
     </div>
 </section>

如果我运行此代码此处的示例文本将转换为缩放，这是我不想要的。有什么解决方案可以仅缩放背景图像而不缩放其上的文本吗？

请帮忙。

Answer 1

有多种技巧可以实现这种缩放效果。这里有两个:

一:借助背景图片:

 <div class="page-bg"></div>

在部分元素内调用一个空 div，并为其声明高度和宽度设置背景图像。但这不是语义标记方式。尽管尝试一下:

.page-bg {
    width: 100%;
    height: 100%;
    background: url('https://pbs.twimg.com/media/B6mjgHuCIAEgyli.jpg');
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 5s ease-in;
    z-index: -1;
    position: absolute;
}

这是JSFIDDLE为了你的效果。

技巧二:语义方式。不要从 CSS 调用图像作为背景图像，而是直接在 HTML 标记中调用它并通过 CSS 与父元素定位。因此，您将拥有一个灵活的游戏区域。

<div class="page1-box">
    <section class="page1">
        <img src="../images/bg-img.jpg" alt="bg">
        <div class="page_container">
            <div class="text">sample text here</div>
        </div>
    </section>
</div>

这个技巧的 CSS 与第一个技巧非常相似，这就是为什么我不打算在这里展示。一起玩吧。如果这不能解决您的问题，请不要忘记在下面发表评论。 :)