替换css background-image：url（...）与<img>标记并保持滚动效果

Question

我想为我的网站上的图像添加替代标记以改善搜索引擎优化。问题是我使用CSS嵌入它们background-image：url（...）。

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

当前代码：

.text { 
 
    margin: 200px 20px; 
 
} 
 
.image-background { 
 
    background-attachment: fixed; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    display: block; 
 
    height: 800px; 
 
    margin-bottom: 150px; 
 
    margin-left: -1500px; 
 
    margin-right: -1500px; 
 
    margin-top: 150px; 
 
    width: 3500px; 
 
} 
 
.image1 { 
 
    background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg); 
 
} 
 
.image2 { 
 
    background-image: url(http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg); 
 
}

<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div> 
 
<div class='image-background image1'></div> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div> 
 
<div class='image-background image2'></div> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div>

的问题是：如何添加<img>标签与alt性质不破坏外观？

编辑：

我使用<IMG>用CSS 位置尝试：固定，但不能让它使用一个以上的图像（my broken jsfiddle here）很好地工作。

编辑2：

这些图像是网站内容的一部分，不布局。他们值得使用alt标签，我并不是想以“坏”的方式填充更多的关键字。我最初把它们作为背景来达到视觉效果。现在我想解决这个错误，但不改变网站的外观。我在说about my photos on this blog。

编辑3：

我并不想在这里使用只有 CSS。任何代码修改，JS库或几乎任何东西都很好！

Answer 1

方法1

此方法不会改变图像的可见性，所以我觉得有没有关于SEO的问题都没有。但它更加复杂，并且需要注意每一次只能出现一个图像。所以文本的div必须填满整个屏幕，导致一个很大的填充。

$(function(){ 
 
    var texts = $('.text'); 
 
    var oldY = 0; 
 
    
 
    $(document).scroll(function(){ 
 
    var y = window.scrollY; 
 
    
 
    texts.each(function(){ 
 
     var text = $(this); 
 
     
 
     if(y >= text.offset().top) 
 
     text.next().addClass('active'); 
 
     else 
 
     text.next().removeClass('active'); 
 
    }); 
 
    }); 
 
});

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.text{ 
 
    padding: 20px; 
 
    margin: 0 0 600px; 
 
    position: relative; 
 
    z-index: 3; 
 
    background-color: #fff; 
 
    min-height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.background-img img{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 
.background-img.active img{ 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div> 
 
<div class="background-img active"> 
 
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1"> 
 
</div> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div> 
 
<div class="background-img"> 
 
    <img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2"> 
 
</div> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div>

方法2

这是简单的，并说这几乎是从原来的代码相同的想法的真相。不同之处在于，只要页面加载，图像就被隐藏起来，然后作为父级div的背景图像复制。优点是，您可以同时看到多个可见的图像，这是一个更好的效果。

$(function(){ 
 
    $('.background-img img').each(function(){ 
 
    var img = $(this).hide(); 
 
    img.parent().css('background-image', 'url(' + img.prop('src') + ')'); 
 
    }); 
 
});

body{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.text{ 
 
    padding: 200px 20px; 
 
    position: relative; 
 
    z-index: 3; 
 
    background-color: #fff; 
 
} 
 

 
.background-img{ 
 
    height: 400px; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div> 
 
<div class="background-img"> 
 
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1"> 
 
</div> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div> 
 
<div class="background-img"> 
 
    <img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2"> 
 
</div> 
 
<div class='text'> 
 
    Lorem ipsum dolores... 
 
</div>