[英]Replace css background-image: url(…) with <img> tag and keep scrolling over effect
我想在我的网站上为图像添加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库或几乎任何东西都没问题!
这种方法不会改变图像的可见性,所以我认为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.