草庐IT

css - BODY 背景图像在浏览器视口(viewport)中被截断

coder 2023-08-10 原文

已解决
我使用了下面 Roman 提出的解决方案，基于添加一个额外的 DIV 和 position:absolute，我在 IE7、IE8、IE9、Chrome 和 Firefox 中测试了它，似乎工作正常!

所以布局现在有 3 个完整的背景图像(我需要的)，甚至你可以使用 BODY bg 来处理它会被截断到浏览器的视口(viewport)高度(仍然可能是在某些情况下很有用)，带有“粘性页脚”的“三个半”背景图像 :)

我发现唯一的缺点是 #footerContent 中的链接不是“可点击的”，我使用此容器的 position:relative 解决了这个问题。

我对我提供的示例进行了更改并将其上传到我的 Dropbox，以防其他人发现它有用。 谢谢大家的答案。 http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar

我上传了

我正在为一个网站构建一个相当复杂的布局，我需要用 3 个背景图像来覆盖网页的背景。所以我有一个 HTML 风格的，一个是 BODY 风格的，最后一个是 DIV 的，它是所有的容器网页元素(#contenedor)

我还使用了一个“粘性页脚”技术，当“主要内容”区域中有小内容时，将页脚“粘”到页面底部。 p>

我遇到的问题是 BODY bg 图像被截断到网络浏览器的视口(viewport)，我的意思是，它不会在显示的可见区域下方重复 y加载页面时，并且内容“高”到足以使网页滚动。

到目前为止我尝试过的:

  1. 添加一个额外的容器 DIV 包围所有内容(这对我来说没问题)，但这样做会破坏“粘性页脚”(也许我没有找到正确的方法) ...我不知道)。

  2. 强制 BODY 与 HTML 一样高，使用:

    html>body {  
min-height:100%;  
height:auto;  
height:100%; }

这解决了 BODY 问题，图像重复，但这也打破了“粘性页脚”...:(

你可以看到一个例子:
带有“小内容”的索引都可以...底部的页脚等
http://carloscabo.com/bg/index.htm

包含高内容的索引页(简单的BRs)，向下滚动以查看 BODY bg 图像上的剪切
http://carloscabo.com/bg/index_tall.htm

您也可以在以下网址下载该示例的所有文件，进行您自己的本地测试。
http://carloscabo.com/bg/stackoverflow_html.zip

最佳答案

由于我不太明白的原因， body 似乎停留在视口(viewport)的 100% 高度。它拒绝增长超过这一点，并且不继承整个页面的真实高度。

不过，如果你不介意再添加一个helper div，你可以轻松解决问题。

首先让我们从 html 开始:
- 在头部部分之前添加一个辅助 div。

<div id="contenedor">

    <!--HELPER DIV GOES HERE: BACKGROUND FIX-->
    <div id="bgfix"></div>

    <header id="arriba">
        ...
    </header><!--header#arriba-->

    ...

<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->

现在让我们修改CSS:
- 从 body 中移除背景，并将其放入新的 helper div 中。

body {
    height:100%;
    min-height:100%
    text-align:center;
//  background:url(../img/bg_body.png) center top repeat-y;
    color:#fff;
}

#contenedor {
    position:relative; /* For #bgfix to attach here */
    ...
}

#bgfix {
    background:url(../img/bg_body.png) center top repeat-y;
    position: absolute;
    width: 100%; height: 100%;
    z-index:-1;
}

瞧!
希望对您有所帮助!!!

关于css - BODY 背景图像在浏览器视口(viewport)中被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7179175/

viewportBODYstrongsectionstackoverflowcsshtmllayout

有关css - BODY 背景图像在浏览器视口(viewport)中被截断的更多相关文章

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

  2. 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并在看到包时选择

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

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

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

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

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

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

  6. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  7. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  8. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  9. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  10. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

随机推荐