草庐IT

html - 静态背景图像 "pulsates"快速 - 非常奇怪

coder 2023-07-31 原文

这是我见过的最奇怪的事情。

我有一个具有背景图像的 div 类，定义如下:

background-image: url("circle.png")
background-size: contain

您可以在此处查看 div:Rouvou.com/fiction .它们称为 .circle-blue 或 .circle-red，这两个类的行为相同。

所以这就是它变得奇怪的地方:在带有 ThinkVision 显示器的 Lenovo ThinkCentre 机器上，使用 Firefox，它们快速“脉动”，或者在宽度和高度上向右和向下增加一个像素，然后再次收缩，速度非常快，像闪烁。

由于 Lenovo 是只安装了两个浏览器的学校计算机，我唯一可以测试它的其他浏览器是 IE，在其中未发现此行为。我希望我可以在这里发布视频来展示它，但这是其中一个 div 的屏幕截图:

我已经在许多其他类型的机器上的几乎所有浏览器上测试过它，我发现这种行为的唯一地方是 Lenovo ThinkCentre 上的 Firefox，带有 ThinkVision 显示器。我还测试了大约 20 个不同的 ThinkCentres，并且在每个 ThinkCentres 上都显示此错误。

有没有人遇到过这样的事情？可能是什么原因造成的？任何人都可以至少在他们的机器/浏览器上重现该问题吗？

如果重要的话，我使用的是 Firefox 31.0。

最佳答案

如果不访问其中一台机器，我无法对其进行测试，但在查看您的页面后，我可以 99% 肯定地说问题实际上是 background-size: contain 的一部分下面的规则。 Firefox 在那个浏览器版本中才开始支持它，它可能还有点问题。 ( http://caniuse.com/#feat=background-img-opts ) 另一件让我相信是这种情况的事情是，当不应用该规则时，背景图像会像您描述的那样向右和向下扩展。

由于这些点的大小在调整页面大小时不会改变，因此解决方法是在 Gimp 或 Photoshop 中手动将图像调整为正确的大小，而不是尝试即时执行。这个小的清理也会对页面的整体加载/呈现做出微小的改进。

如果您确实需要调整图像大小，您的选择是使用带有 width: 100%; 的 img 标签； height: auto 并将文本覆盖在顶部，或者制作只有双色调颜色和水平斜线的更大图像。我可能只是将其全部设为正方形图像，然后将其添加为 background-image 并将位置设置为中心/中心(如果需要调整大小时，将斜线保持在正确的位置)和将 div 上的 border-radius 设置为 div 大小的 50%，使其再次成为一个圆。

#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
  display: inline-block;
  position: absolute;
  width: 57px;
  height: 57px;
  background-size: contain;
}

关于html - 静态背景图像 "pulsates"快速 - 非常奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30083654/

amppulsatescodebackgroundsectionhtmlimagecssfirefox

有关html - 静态背景图像 "pulsates"快速 - 非常奇怪的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  7. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  8. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  9. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  10. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

随机推荐