【问题标题】：Replace css background-image: url(...) with <img> tag and keep scrolling over effect用 <img> 标签替换 css background-image: url(...) 并保持滚动效果
【发布时间】：2017-02-02 15:31:53
【问题描述】：

我想为我网站上的图片添加 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 position:fixed 一起使用，但无法使其正常工作与多个图像 (my broken jsfiddle here)。

编辑 2：

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

编辑 3：

我不想在这里使用 only CSS。任何代码修改、JS 库或几乎任何东西都可以！

【问题讨论】：

你可以包含一个带有 css 的图像标签来隐藏它
为什么不在编辑器中更改实际标记？
@JaromandaX 谷歌不会发现它是隐藏的并因此惩罚 SEO 分数吗？
使用<img> 获得相同的效果是可能的，但要复杂得多，使用position:fixed 和适当的z-index 操作应该是可以实现的
如果图片适合作为背景图片，那么不适合给它alt文字。 alt 文本用于向用户传达信息的图像（不复制页面上已有的内容）。如果您的图像正在传达此类信息，那么它们首先不应该是背景图像。（请注意，搜索引擎的关键字填充是一个糟糕的主意，您应该在编写替代文本之前阅读alanflavell.org.uk/alt/alt-text.html）

标签： javascript html css seo

【解决方案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>

方法二

这更简单，说实话，它与您原始代码的想法几乎相同。不同之处在于，一旦页面加载，图像就会被隐藏，然后复制为其父 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>

【讨论】：