Javascript 将css背景图像：url（…）替换为<；img>；标记并保持滚动效果

我想在我的网站上添加alt标签来提高搜索引擎优化。问题是我正在使用CSS背景图像嵌入它们：url（…）

它创建了所需的滚动效果（见下文），但不利于SEO

当前代码：

.text{
利润率：200px 20px；
}
.图像背景{
背景附件：固定；
背景位置：50%50%；
背景重复：无重复；
背景大小：100%；
显示：块；
高度：800px；
边缘底部：150px；
左边距：-1500px；
右边距：-1500px；
边缘顶部：150px；
宽度：3500px；
}
.image1{
背景图片：url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
}
.image2{
背景图片：url(http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg);
}

洛雷姆·伊普苏姆·多洛雷斯。。。
洛雷姆·伊普苏姆·多洛雷斯。。。
洛雷姆·伊普苏姆·多洛雷斯。。。

方法1 这种方法不会改变图像的可见性，所以我认为SEO根本没有问题。但它更为复杂，并且有一个警告：一次只能出现一个图像。因此，文本的div必须填充整个屏幕，从而产生较大的填充

$（函数（）{
变量文本=$（'.text'）；
var-oldY=0；
$（文档）。滚动（函数（）{
var y=window.scrollY；
文本。每个（函数（）{
var text=$（此）；
如果（y>=text.offset（）.top）
text.next（）.addClass（'active'）；
其他的
text.next（）.removeClass（'active'）；
});
});
});
正文{
填充：0；
保证金：0；
}
.文本{
填充：20px；
利润率：0.600px；
位置：相对位置；
z指数：3；
背景色：#fff；
最小高度：100vh；
显示器：flex；
对齐项目：居中；
}
.背景图像图像图像图像{
位置：固定；
排名：0；
左：0；
z指数：1；
宽度：100%；
}
.background-img.active img{
z指数：2；
}

洛雷姆·伊普苏姆·多洛雷斯。。。
洛雷姆·伊普苏姆·多洛雷斯。。。
洛雷姆·伊普苏姆·多洛雷斯。。。
你可以用css包含一个图像标签来隐藏它，为什么不在编辑器中更改实际的标记呢？@JaromandaX难道谷歌不会发现它是隐藏的，并因此惩罚SEO分数吗？使用
可以获得同样的效果，但要复杂得多，使用
position:fixed
和适当的z索引操作应该可以实现如果图像适合作为背景图像，则不适合为其指定
alt
文本
alt
文本用于向用户传达信息的图像（不复制页面上已有的内容）。如果你的图像传达了这样的信息，那么它们一开始就不应该是背景图像。（请注意，搜索引擎的关键字填充是一个糟糕的主意，您应该在编写alt文本之前阅读）