用css替換css background-image：url（...） <img> 標記並繼續滾動效果

Question

我想在我的網站上為圖像添加alt標簽以改善SEO。 問題是我使用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> 

問題是：如何在不破壞視覺外觀的情況下添加帶有alt屬性的<img>標簽？

編輯：

我嘗試使用帶有css 位置的 <img> ：已修復，但無法使其與多個圖像一起使用 （ 我的破解jsfiddle ）。

編輯2：

這些圖像是網站內容的一部分， 而不是布局。 他們應該得到alt標簽，我不是試圖以“糟糕”的方式填充更多關鍵字。 我最初把它們作為背景來實現視覺效果。 現在我想解決這個錯誤，但不改變網站的樣子。 我正在談論我在這個博客上的照片 。

編輯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>