html - 在窗口调整大小时，背景图像会远离导航栏-6ren

html - 在窗口调整大小时，背景图像会远离导航栏

转载作者：行者123 更新时间：2023-11-28 07:59:08

我在一个元素中深入研究了 RWD 的实践。我有一个 nav 栏和一个我应用了 CSS background-size: contain; 属性的背景图片。

当我将浏览器窗口的大小调整为视口(viewport)中较小的宽度时，nav 栏开始脱离图像并缩放背景图像。我可以应用任何其他 CSS 来使 nav 栏像磁铁一样附着在背景图像的底部吗？

ems 会帮助解决这个问题吗？

这是一个 live example -(缩小浏览器窗口宽度并观察它分开):

HTML 和 CSS 代码:

#aside_sect_mm {
  margin: 0%;
  background-image: url(../img/mm_main_tab_c.jpg);
  background-size: contain;
  width: 100%;
  max-width: 704px;
  height: 318px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 100%;
  top: 100%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: absolute;
  padding: 6.5% 0% 0% 0%;
  height: 100px;
  width: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100px;
  max-width: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li:hover {
  background-color: #F6EF1B;
}
#aside_sect_mm nav ul li:hover a {
  color: #004E27;
  cursor: pointer;
}
#aside_sect_mm nav ul li.bio_icon:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>nav bar test</title>
  <link href="css/test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

最佳答案

改用这种方法怎么样？拥有背景图像并使其具有响应性有点困难。将图像嵌入到 html 中，这将使响应更容易。

#splash-area img {
  vertical-align: bottom;
  width: 100%;
}
#aside_sect_mm {
  margin: 0%;
  width: 100%;
  max-width: 704px;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 100%;
  top: 100%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: absolute;
  padding: 6.5% 0% 0% 0%;
  height: 100px;
  width: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100px;
  max-width: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li:hover {
  background-color: #F6EF1B;
}
#aside_sect_mm nav ul li:hover a {
  color: #004E27;
  cursor: pointer;
}
#aside_sect_mm nav ul li.bio_icon:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>nav bar test</title>
  <link href="css/test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="splash-area"><img src="http://visionsic.github.io/DSW_II/img/mm_main_tab_c.jpg"/></div>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

#aside_sect_mm {
  margin: 0%;
  background-image: url(../img/mm_main_tab_c.jpg);
  background-size: contain;
  width: 100%;
  max-width: 704px;
  height: 318px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 100%;
  top: 100%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: absolute;
  padding: 6.5% 0% 0% 0%;
  height: 100px;
  width: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100px;
  max-width: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li:hover {
  background-color: #F6EF1B;
}
#aside_sect_mm nav ul li:hover a {
  color: #004E27;
  cursor: pointer;
}
#aside_sect_mm nav ul li.bio_icon:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>nav bar test</title>
  <link href="css/test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

关于html - 在窗口调整大小时，背景图像会远离导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29907891/

文章推荐： c++ - 模板实例化时typeid()

文章推荐： javascript - 避免将返回的数据保存到 ngResource

文章推荐： c++ - 使用动态无符号字符数组时发生未知崩溃

c# - 当手靠近/远离 HoloLens 相机时，将游戏对象移近/远离 HoloLens 相机
我目前遇到一个问题，当我的手向前/向后时，我想将游戏对象移近/远离我(HoloLens 相机)。好吧，我已经正确地实现了将对象移近/移远的逻辑，但无法通过确定手的运动来解决问题。我正在使用 HoloT
Delphi:远离 VSS
我们是由少数 Delphi 开发人员组成的团队，他们多年来一直在使用 VSS(我知道这很遗憾)，但我们没有使用 VCS 的任何高级功能，因此在很多情况下它都工作正常(但有些情况)有时它让我发疯:()。
graphviz - 远离 DOT 中的节点路由边缘？
我正在使用 DOT 生成如下所示的有向图。我希望所有边都有一个南尾口和一个北头口，这样所有边都从节点的底部开始并进入节点的顶部。正如您从左侧图像中看到的那样，从节点 2 到节点 4 和节点 6 的边
Javascript，远离 'this' 并使用本地范围
在一个典型的js类中，所有对成员函数的调用都必须在this之前。我正在寻找一种技术，它可以让我创建一个相互依赖的 STATIC 函数库，并依靠闭包/作用域使事情变得更容易一些。例子: var Sin
sql - 远离 SQL 注入(inject)
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
iphone - 如何让 Controller 远离 xib
作为一个新手，IB 和所有可能的联系让我感到困惑。我发现的大多数教程都是我所说的意大利面条代码的转世，其中的纠缠是通过拖动创建的所有连接。当然，我想使用 IB 进行 View 布局(调整大小和放置视觉
Delphi 视觉组件 - 远离 TFrame 基础？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
html - 图像(字面意思)远离 div
黄点“gif1”必须进入黑框“gif”，但如您所见，我以某种方式设法做了相反的事情。我做错了多少事？ Livewave Preview 我已经尝试过 overflow:auto 或 hidden 并
c++ - 远离 Windows\C++ 中的虚拟内存
我正在编写一个性能关键型应用程序，它必须在转储到磁盘之前在物理内存中存储尽可能多的数据。我可以使用 ::GlobalMemoryStatusEx(...) 和 ::GetProcessMemoryI
javascript - 远离 Excel 工作簿/VBA - 技术升级
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 2年前关闭。 Improve this questi
java - 远离 Spring(1.2.7) 遗留应用程序
我目前正在开发使用 spring 1.2.7 的 Spring 遗留应用程序。 org.springframework spring 1.2.7 但是上面的 Artifa
ios - 作为 subview 添加的 UIButton 远离 UIView
尝试并搜索了很多。当父 View 的框架较小时，作为 subview 添加的按钮远离 View 。我不希望它在框架很小的时候出现。 UIView *vw = [[UIView alloc] init
ios - 检测 Sprite 外面/远离 Sprite 的敲击
我有一个游戏，其中有一个绿色圆圈在场景中的随机位置随机生成，每次点击该圆圈时，它都会改变位置，有可能会变成红色。当圆圈为红色时，我希望用户点击不是红色圆圈的屏幕空间。如何检测不在圆圈上的水龙头？我的圈
javascript - 让 AWS key 远离 Javascript 代码
我有一个 Web 应用程序，它使用 AWS Lambda 和 API Gateway(受 IAM 保护)作为后端，前端是使用 React 构建的。我正在尝试找出将 AWS key 排除在生产 Java
javascript - native JavaScript - 检测何时单击 div 远离/未聚焦
我需要知道我的 div 何时在原生 javascript 中被点击。最佳答案要仅使用 native javascript 代码来测试被单击的元素是否是有问题的元素，您可以这样做 var handl
java - 远离 child : Removing protected fields from inheritance
本着精心设计的面向对象的精神，我正在扩展的某个类已将其字段之一标记为 protected 。此类还慷慨地提供了公共(public) setter，但没有 getter。我正在用一个基类扩展这个类，这
android - (OpenGL ES) 远离 View 中心的对象被拉伸(stretch)
所以我在 OpenGL ES 中生成了一个球体(具体来说，OpenGL ES 2.0，在 Java 中，适用于 Android)。当这个球体放置在与用于我的 View 矩阵的中心相同的位置时，它很好，
android - 如何在 Android 屏幕关闭时让 CPU 远离 'sleeping'？
我有一个应用程序，我在其中通过 WiFI 发送网络数据。一切都很好，直到我关闭显示器或设备进入“ sleep ”状态。我已经锁定了 WiFi，但是，似乎是这样的情况，即 CPU 速度在 sleep 时
php - 回显字符串时如何使 PHP 远离 strippng XML 标记
我通过 exec 在 PHP 中执行一个外部命令，我获取该输出(它是一个数组)，然后让各个字符串搜索特定的字符串。然后我希望将这些字符串回显到屏幕上。但是，其中一些字符串包含 XML 示例，并且它们正
java - 在 Linux 上运行 Java 有什么好处(远离 Windows)
我目前正在 Windows 上运行一个大型分布式 Java 系统。从 Java 的角度来看，迁移到 Linux 有什么好处？我能想到的一个是能够在 native 运行“服务”。目前我必须登录到 W

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在窗口调整大小时，背景图像会远离导航栏