我想为我网站上的图片添加 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 的标签不破坏视觉外观的属性？
编辑:
我尝试将 与 css position:fixed 一起使用，但无法让它很好地工作有多个图像 ( my broken jsfiddle here )。
编辑 2:
这些图像是网站内容的一部分，不是布局。他们应该使用 alt 标签，我并不是想以“糟糕”的方式填充更多关键字。我最初把它们作为背景来达到视觉效果。现在我想修正错误，但不改变网站的外观。 我在说about my photos on this blog .
编辑 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>
关于javascript - 将 css background-image : url(. ..) 替换为 <img> 标签并保持滚动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39683354/
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
在我的应用程序中，我需要能够找到所有数字子字符串，然后扫描每个子字符串，找到第一个匹配范围(例如5到15之间)的子字符串，并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串，例如，re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项，并且只替换第N个匹配项，我该怎么做？例如，如果我想替换第三个匹配项“10”(匹配项[2])，我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg
从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些
我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.