代码之家 › 专栏 › 技术社区 › J. Doe

使背景图像响应移动布局,但保持在固定位置

fixed background css3 html5

J. Doe · 技术社区 · 7 年前

<!-- Header -->
<header class="masthead bg-head text-white text-center">
  <div class="container">
    <h1 class="text-uppercase mb-0">My Name</h1>
    <img class="img-fluid" src="img/star-light.png" alt="">
    <h2 class="font-weight-light mb-0">Issue Solving</h2>
  </div>
</header>

最后一小时我播放的css代码是:

@media (min-width: 992px) {
  header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 71px;
    padding-top: 96px;
    height: 25rem;
    width: 1280px;
  }
}

一旦我开始缩小浏览器到与图片相同的宽度,它就应该开始缩小,但要按比例缩小。不知怎的,我现在不知道还有什么别的把戏

1 回复 | 直到 7 年前

Joel 7 年前

首先:您不需要在@media query:)中执行此操作

因此,让我们在不使用@media query的情况下解决这个问题,我们将使用视口单位,而不是固定的比例。

header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 71px;
    padding-top: 96px;
    height: 20vh;
    width: 100vw;
  }

把它改成大众和vh会使它反应灵敏。您可以添加 max-width: 1280px

推荐文章

Nora PÄ« · 统一问题在2d精灵后面排序立方体

3 年前

Codename K · VB6-如何使窗体排在第二位?

8 年前

Tobias von Falkenhayn · 如何为无休止的滚动回收视图绘制背景

8 年前

uzi_no_uzi · 如何修复背景位置的错误?

8 年前

EagerToLearn · .Net控制台应用程序在后台运行

8 年前

Eric Chong · Swift中所有视图控制器的背景图像相同

8 年前

Zhihar · css:带背景的选项卡样式边框

8 年前

Amine Messaoudi · icepdfcore使JFrame在后台保持打开状态

8 年前

Lukasz · WORDPRESS-不需要的HTML按钮背景色

8 年前

Jorge · div上的方形图案作为背景(使用纯CSS)

8 年前