我想让图像全屏显示,直到滚动

2024-04-21

这是我尝试将此全屏图像应用到的页面:http://www.alexwiley.co.uk/portfolio http://www.alexwiley.co.uk/portfolio

我希望使图像显示 100% 宽度和 100% 高度,直到向下滚动,然后滚动时可以看到下面的内容。

这是我想要做的事情的示例网站:http://www.nilsfrahm.com/ http://www.nilsfrahm.com/

您可以看到他的图像是全屏的,直到他滚动为止。

我在 Adob​​e Muse CC 中制作这个网站,只是作为附加信息。


您需要使用后台附件:固定;带有背景图像和背景大小:封面;

大屏版本:http://codepen.io/suez/full/wulBv/ http://codepen.io/suez/full/wulBv/

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
}
div.first {
  background-image: url("http://i.imgur.com/PbV1Grl.jpg");
  background-attachment: fixed;
  background-size: cover;
}
div.second {
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-size: cover;
}
<div class="first"></div>
<div class="second"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我想让图像全屏显示,直到滚动 的相关文章

  • css伪类最后一个子问题

    我在使用时遇到问题 last child伪选择器 我有以下标记 div class apply container div
  • 无法在 css 中使用 .ani 光标?

    我自定义了网站的光标 但是CSS光标 url 仅适用于 gif png 或 cur 我想使用 ani 文件 但它只能在 IE 中使用 cursor url img mcursor cur auto IE 使用 Windows API 支持
  • 自动更改时 onChange 事件不起作用

    我在一个选择框 usageDisplays 上有一个 onChange 事件 它根据第一个选择框的选定值填充下一个选择框
  • 使用javascript隐藏html元素

    JavaScript function hide article var htmlElement document getElementsByTagName article 0 htmlElement setAttribute visibi
  • 将 UIImage 放入 UIButton 的简单方法

    我的 iPhone 应用程序中有一个 UIButton 我将其大小设置为 100x100 我有一个 400x200 的图像 我希望在按钮中显示它 按钮仍然需要保持在 100x100 并且我希望图像缩小以适应 但是 保持正确的纵横比 我想这就
  • 突出显示 Html 文档中不同标签的文本

    我是新来的角js 现在我正在突出显示 HTML 文档中的文本 So 我的代码是这样的 var InstantSearch highlight function container highlightText var internalHigh
  • 在网页上写乐谱[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我希望能够在网页中编写乐谱和和弦 有没有可用的库 例如用于数学的 Mathjax 如果没有 那么还有其
  • contenteditable,在文本末尾设置插入符号(跨浏览器)

    输出在Chrome div style border 1px solid 000 width 500px height 40px hey div what s up div div div div
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • 使用 jQuery 对 CSS 变换进行动画处理

    我正在尝试为 div 制作动画 并让它绕 y 轴旋转 180 度 当我调用以下代码时 出现 jQuery 错误 my div animate transform rotateY 180deg webkit transform rotateY
  • document.registerElement - 为什么我们需要指定“prototype”和“extends”?

    考虑我想扩展本地button元素 并创建我自己的super button元素 据我所知 它必须遵循以下模式 var SuperButton document registerElement super button prototype Ob
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • 如何链接到具有特定经度和纬度的 Google 地图?

    我有一个小应用程序 可以提供当前位置 经度和纬度 现在我必须浏览带有经度和纬度的谷歌地图 请建议我如何做到这一点 最好的方法是使用q参数 以便显示带有标记点的地图 例如 https maps google com q
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约
  • 防止 Bootstrap IE 下拉列表在滚动条单击时关闭

    在 IE 中 单击下拉菜单滚动条时 下拉菜单将关闭 当您使用鼠标滚轮滚动它时 效果很好 这是代码层链接 https www codeply com go Uh8qadr3q2 https www codeply com go Uh8qadr
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • 具有 MVC4 风格捆绑的 Intellisense

    到目前为止我找不到问题或解决这个问题 我确信我错过了一些简单的事情 我有一个带有一堆缩小的 CSS 的样式包 并且我正在用里面的类来装饰 HTML 元素 一切都运转良好 然而 Intellisense 和 ReSharper 都因为 CSS
  • jQuery - 动画CSS背景大小?

    我正在尝试对背景图像的大小进行动画处理 但它不起作用 从以下代码中知道为什么吗 this animate opacity 1 background size 70px 48px right 39 top 45 250 注意 所有其他属性都可

随机推荐

  • 同一网络中的 Fabric-Kafka 和 Fabric-odor 容器的用例是什么

    我可以看到有 3 种类型的排序者 当我部署结构网络时 最多使用两种类型 https hub docker com r hyperledger fabric orderer https hub docker com r hyperledger
  • 不明白objective-c中的多个参数声明

    有人可以帮我澄清一下吗 当有多个参数时 参数在方法名称中的冒号后面声明 参数在声明中将名称分开 就像在消息中一样 例如 void setWidth float width height float height 所以在上面 方法是实例变量
  • 是否可以使用容器管理的身份验证和密码加盐?

    我知道如何设置使用表单身份验证并使用摘要密码 例如 SHA 256 的普通容器管理安全性 像这样的东西 web xml
  • 如何在iPhone中的sqlite数据库中插入图像

    如何在数据库中插入图像 我尝试过但没有插入 查询的问题出在哪里 这是我的模型类 m 文件 此文件中的代码之后sqlite3 prepare v2我的痕迹没有插入sqlite3 bind blob之后就直接出去了sqlite3 prepare
  • 使用 Retrofit2 在 Android Studio 上的位置 0 处出现意外的 JSON 标记 # 错误

    我有一个问题 JSON 中位置 0 处出现意外的标记 我想做的是使用 Firebase 上的 Cloud Function 删除 Firebase 用户 没有返回 但错误显示 存在意外的 json 令牌 这是一些代码 CloudFuncti
  • Twitter API 速率限制

    我想从 Twitter 收集几周内的数据 为此 我使用 RStudio Server 和 crontab 自动运行多个脚本 如下所示 require ROAuth require twitteR require plyr load twit
  • 将通用扩展方法限制为基本类型和字符串

    我想要 XElement XAttribute 的扩展方法 它允许我应用 ValueOrDefault 逻辑 也许具有各种略有不同的实现 ValueOrNull ValueOrDefault NumericValueOrDefault 验证
  • HTML 实体解码为特殊字符

    我想在输出中显示特殊符号 例如 我的文本可能包含实体代码 例如 lt gt ETC 我想将其显示为 lt gt 在我的输出中 我需要在 SQL 中执行此操作 我用谷歌搜索了这个并得到了一个函数 select dbms xmlgen conv
  • 使用依赖注入在工作线程中实例化对象

    我的目标是在并行线程中运行一个永无止境的进程 问题是 我不能只在新线程中实例化我的工作服务 因为我在我的应用程序中使用 DI 根据我对 SO 的研究 我注意到很多人建议需要将抽象工厂注入到线程中 以在并行线程中动态实例化线程安全对象 1 h
  • 输出字符串字符总数

    我的问题是 如果我想获取用户输入的字符总数 应该使用什么方法 在不使用数组的情况下 我尝试使用 length 但它没有返回名字和姓氏中的所有字符 它只返回名字 这是我的代码的示例 请不要笑我在编程方面真的很新 System out prin
  • 在 SVG 路径中对 SVG 进行动画处理

    我已经构建了一个路径动画 但 svg 中的锯片有问题 我想要为 Sawblade 制作动画 360 度旋转
  • 尝试伪造和轮换用户代理

    我正在尝试伪造用户代理并在 Python 中轮换它们 我在网上找到了一个关于如何使用 Scrapy 执行此操作的教程scrapy 用户代理 https github com svetlyak40wt scrapy useragents包裹
  • 如何在 Jekyll 中列出同一类别的帖子?

    我想列出与当前帖子具有相同类别的固定数量的最近帖子 这就是我得出的结论 for category name in page categories limit 1 h2 Other articles in category name h2 u
  • 使用 SSH.NET 在命令输出期间发送输入

    With PuTTY I connect to an SSH server and then I execute a command that constantly output logs multiple lines per second
  • Drupal:drupal_set_message 不显示消息

    当用户在我的网站上注册时 我似乎无法从 drupal set message 收到消息 我正在使用 Drupal 6 14 在 user module 中添加打印 function user register submit form for
  • Laravel 5 重写异常处理程序

    我想知道是否可以重写 Laravel 5 中的应用程序异常处理程序类 而不将其扩展到另一个类 也许更好的说法是我想要它 这样就不会App Exceptions Handler将在异常时调用 但是我自己的处理程序之一 提前致谢 正如 Digi
  • 在 oauth2 SignedJwtAssertionCredentials 中获得“invalid_grant”

    我正在尝试在服务器到服务器 JSON API 场景中创建 oauth2 access token 但它因 invalid grant 错误而失败 请帮助 from oauth2client client import SignedJwtAs
  • 如何检测前置摄像头放置在设备上的位置?

    有什么方法可以检测 Android 设备上前置摄像头的放置位置吗 我认为在手机上它总是在它的顶部 靠近耳机 但所有平板电脑都是不同的 我检查了华硕 Transformer 前置摄像头位于侧面 如果我以横向模式握住它 则位于顶部 但三星 Ga
  • 如何使用 EPPlus 移动工作表?

    需要什么命令EPPlus 移动工作簿中的工作表位置 我找不到任何适用于 EPPlus 互操作的移动命令 有四种移动工作表的方法 他们是 excelPackage Workbook Worksheets MoveAfter excelPack
  • 我想让图像全屏显示,直到滚动

    这是我尝试将此全屏图像应用到的页面 http www alexwiley co uk portfolio http www alexwiley co uk portfolio 我希望使图像显示 100 宽度和 100 高度 直到向下滚动 然