Jquery 在html中缩放背景图像而不是文本

我想在页面上缩放背景图像，但不在其上显示文本

CSS:

Js代码：

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

HTML代码：

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

这里是示例文本

如果我运行此代码

这里的示例文本

将得到我不想要的转换为缩放。有没有办法只放大背景图像而不是文本

请提供帮助。

2解决方案：

使用

背景大小“缩放”背景图像。

：

.page1.zout {
     background-size: [VALUE];
}

<section class="page1">
     <div class="page_container">
     </div>
 </section>

 <div class="text">
      sample text here
  </div>

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

玩弄“价值”，直到它给你想要的尺寸

将文本带到转换元素之外：

.page1.zout {
     background-size: [VALUE];
}

<section class="page1">
     <div class="page_container">
     </div>
 </section>

 <div class="text">
      sample text here
  </div>

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

---

有各种各样的技巧来获得这种缩放效果。这里有两个：

One:借助背景图像：

.page1.zout {
     background-size: [VALUE];
}

<section class="page1">
     <div class="page_container">
     </div>
 </section>

 <div class="text">
      sample text here
  </div>

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

以下是对你的效果的评价

技巧二：语义方式。不要将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和第一个非常相似，这就是为什么我不在这里展示的原因。玩它。如果这不能解决您的问题，请不要忘记在下面发表评论。：）

更改

背景大小

值？