替換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>