javascript – 用标记替换css background-image：url(…)并继续滚动效果

2019年7月28日 177次阅读

我想在我的网站上为图像添加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>

问题是：如何添加< img>具有alt属性的标签而不会破坏视觉外观？

编辑：

我尝试使用< img>使用css位置：已修复,但无法使其与多个图像一起使用(my broken jsfiddle here).

编辑2：

这些图像是网站内容的一部分,而不是布局.他们应该得到alt标签,我不是试图以“糟糕”的方式填充更多关键字.我最初把它们作为背景来实现视觉效果.现在我想解决这个错误,但不改变网站的样子.
我在说about my photos on this blog.

编辑3：

我不是想在这里只使用CSS.任何代码修改,JS库或几乎任何东西都没问题！

最佳答案 方法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>
点赞