草庐IT

javascript - 调整到浏览器大小的 2 部分 CSS "wallpaper"

coder 2023-08-03 原文

我的设计师认为这是不可能的，但在我看来这是可能的。 (尽管我的 CSS 经验有限)。不过他也说后台修不了，stackoverflow过去也证明他错了；所以我质疑他的知识。

如果这不能在纯 CSS 中完成，可以使用 JQuery。

上半部分将是一个完全灵活的渐变，可以向左、向右、向上、向下倾斜，而不会造成太多失真。下半部分是为 1280 x 1024 分辨率制作的理想图像(因为这是最流行的浏览器显示分辨率)。然后根据所需的要求，它会绘制草图并倾斜到它需要的任何尺寸。仍然允许看到所有图像。

上半部分和下半部分之间的比率始终为 50% 50%，与浏览器分辨率无关。

我也希望顶部和底部都固定。

在一个完美的世界(一个没有 IE 的世界)中，我喜欢在 1 个 DIV 中使用 css3 渐变和多个背景来做到这一点。然而，因为 IE9 还没有出来，我认为最好的方法是在一个 DIV 容器中放置 2 个 div，并为顶部的 div 使用 PNG 重复背景。

应该注意我将使用 css3pie.com 来允许 IE6-8 的一些 CSS3(但我不想依赖它，除非 100% 证明)

仅使用 CSS 是否可行？你会怎么做？

如果只用 CSS 做不到，有没有办法让 JavaScript/JQuery 提供帮助？ 我认为 1280 x 1024 的基础不是最好的主意，因为它似乎有一个奇怪的 radio 。

Edit 1

哦，是的，我也有一个 WIP: http://meyers.ipalaces.org/extra/

它在 1280 x 1024 下看起来不错...现在它只是将顶部 DIV 的整体大小调整为 50%，因此图像为 50%。

我仍然希望看到所有的水，因为我喜欢底部岩石的外观。但是，我对其他想法持开放态度，这些想法不能 100% 完成我想要的，但接近于此。

Edit 2

如何使用顶部渐变作为真正的 CSS2 背景，然后只放一个 <img>在它的底部调整大小？也许这将允许 CSS2 功能。我在这里引用了一些解决方法:A list apart

Edit 3

我仍在寻找适用于 IE6 且不会导致 Internet Explorer 延迟的结果。我将赏金设置为 50 以帮助吸引更多关注。

最佳答案

我已经成功地想出了 2 种方法来做到这一点:

方法一

Click here to view demo

使用 CSS3 background-size 我能够将 2 个 div 元素设置为彼此叠加 min-height: 50%然后使用 background-size: 100% 50% 他们成功地完成了我正在寻找的东西。

这个方法只是一个概念验证，因为 IE6-8 不支持 background-size，我没有追求完美地调整这个方法。就目前而言，尽管有 background-attachment: fixed;，但当您滚动时它目前会弄乱。我放弃了这种 CSS3 方法，以便使用 CSS 技巧寻找更好的方法......

方法二

Click here to view demo

按照我从 A List Apart ( Article | Example1 | Example2 ) 中找到的示例进行操作。我使用了示例 1 中的技术 #2，并且我能够仅使用 CSS2 来模拟我想做的事情。 (我不是 100% 确定它是如何或为什么起作用的，但确实如此)

因为我也要用CSS3PIE赋予 IE6-8 CSS3 执行线性渐变、border-radius 和box-shadow 的能力；我选择使用线性渐变而不是顶部背景的图像。

问题

  • 技术 #2 中的 CSS2 方法，示例 1 不能正确地用于 IE6
  • 在所有当前的 Internet Explorer 中造成过度延迟

关于javascript - 调整到浏览器大小的 2 部分 CSS "wallpaper"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3589646/

javascriptampcodestrongnoreferrerjqueryhtmlcsslayout

有关javascript - 调整到浏览器大小的 2 部分 CSS "wallpaper"的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. 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

  3. 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""-

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

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

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

  6. 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

  7. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  8. 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

  9. 使用 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

  10. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

随机推荐