Javascript 如何缩放背景图像和淡入滚动文本

我有一个代码，它用一个

class=“BlogImage”

淡入一个div，但是我不想让它淡入淡入淡出，而是希望它将

transform:scale（1）

缩放到

transform:scale（1.2）

并且不知道如何进行

有实现缩放的代码示例吗？如果它可以在滚动时淡入淡出和缩放效果更好

jQuery(window).scroll(function(){
    jQuery(".BlogImage").css("opacity", 1 - jQuery(window).scrollTop() / 450);
});

仅供参考，这是html，我想缩放背景图像并淡出文本：

<div class="BlogImage" style="background: url('images/ocean.jpg');">
    <div class="page-header">
        <h2>This is a blog title</h2>
    </div>
</div>

这是一个博客标题

---

这似乎模拟了您追求的效果：

$（窗口）。滚动（函数（）{
$（“.BlogImage”）
.css（“不透明度”，1-$（窗口）.scrollTop（）/450）
.css（“背景大小”，（100+100*$（窗口）.scrollTop（）/450）+“%”；
});
.BlogImage{
高度：200px；
宽度：400px；
背景图片：url(http://lorempixel.com/400/200/);
背景重复：无重复；
背景位置：中心；
}
这似乎模拟了您追求的效果：


$（窗口）。滚动（函数（）{
$（“.BlogImage”）
.css（“不透明度”，1-$（窗口）.scrollTop（）/450）
.css（“背景大小”，（100+100*$（窗口）.scrollTop（）/450）+“%”；
});
.BlogImage{
高度：200px；
宽度：400px；
背景图片：url(http://lorempixel.com/400/200/);
背景重复：无重复；
背景位置：中心；
}

请尝试以下方法：jQuery（“.BlogImage”）.css（'transform'，'scale（'+1-jQuery（window.scrollTop（）/450+））；什么也没发生。如果我创建JSFIDLE，JSFIDLE会有帮助吗？是的，请创建JSFIDLE。我将更新itAdded请尝试以下方法：jQuery（“.BlogImage”）.css（'transform'，'scale（'+1-jQuery（window.scrollTop（）/450+））；什么也没发生。如果我创建JSFIDLE，JSFIDLE会有帮助吗？是的，请创建JSFIDLE。我将更新itAdded Yes，但我有一个css类，它覆盖了缩放。我该怎么做呢
.BlogImage{背景尺寸：封面！重要；}
。请参阅并注意，没有
！重要信息
，存在覆盖，图像不会完整显示。使用此解决方案，您可能不需要缩放：-）顺便说一句，它似乎从左角放大。如何使其从中心缩放？类似于blog.invisionapp.com/typography陌生人的事情
你是否添加了背景位置：居中；完成。非常感谢：）是的，但是我有一个css类，它覆盖了缩放。我该怎么做呢
.BlogImage{背景尺寸：封面！重要；}
。请参阅并注意，没有
！重要信息
，存在覆盖，图像不会完整显示。使用此解决方案，您可能不需要缩放：-）顺便说一句，它似乎从左角放大。如何使其从中心缩放？类似于blog.invisionapp.com/typography陌生人的事情

你是否添加了背景位置：居中；完成。非常感谢：）