时间戳

首页 > 解决方案 > 背景图像滚动功能不起作用

html - 背景图像滚动功能不起作用

问题描述

这听起来可能很愚蠢，但我有一个背景作为网络上的图像，我希望它随着页面滚动而滚动。我在互联网上查看了它是如何完成的，但它仍然对我不起作用，即使我，至少我希望，我做对了。我有一段时间没有使用 Html/CSS，所以我将不胜感激。非常感谢。

header.masthead::after {
  content: "";
  background-image: url(/assets/img/gradient-bg.jpg);
  /* background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
}

<header class="masthead">
        <div class="container">
            <h1 id="mainH1" class="mastshead-subheading" style="color: white" ;>Find ideal <span
                    style="font-weight: 700;color: rgb(140,113,255);">mouse</span> for your hand</h1>
            <h2 class="mastshead-subheading" style="font-weight: 700;color: rgb(140,113,255);"> Select your screen
                <button type="button" class="btn btn-primary" style="font-weight: 700; font-size: 2rem;"
                    data-container="body" data-toggle="popover" data-placement="top" data-content="Diagonal should be written in info box on back side of your computer screen.
                    Google model of your monitor (written on back side of your computer screen).
                    Measure it with ruler (1 inch = 2.54 cm).">diagonal<sup> ?</sup></button> in inches
            </h2>
            <div class="text text-white"
                style="display:inline-block;background:transparent;border:none;font-weight:600;font-size:1.15rem;margin:0;"
                role="alert">
                <u>Make sure that your browser zoom is set to 100%</u>
            </div>
            <div id="inches-wrapper">
                <select id="inches" class="selectpicker" title="''" data-style="btn-warning" data-dropup-auto="false"
                    data-display="static" style="color:grey !important; font-size: 50px;">
                </select>
                <div id="manual-inches-wrapper">
                    <input id="manual-inches" placeholder="''" autocomplete="off">
                    <br>
                    <button class="btn btn-lg btn-dark" id="inches-confirm">OK</button>
                    <br>
                    <div class="alert" id=alert>Wrong input</div>
                </div>
                <!--
                <div class="bubble" id="firstBubble">
                    <img class="bubble-img" src="assets/img/step1-2.png">
                </div>
                -->
            </div>
            <!-- js-scroll-trigger in js code-->
        </div>
    </header>

标签： htmlcsspositionbackground-image

解决方案

如果您将图像移动到单独的潜水，它将起作用。

<header>....</header>
<div class="background-image"></div>

header{
  height:200vh;
}

.background-image {
  content: "";
   background-image: url(https://m.media-amazon.com/images/M/MV5BZTI2YTlhMWMtNWY1Mi00NGQ3LWFkMjEtZjI3NmUzYjI1NWFmXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg); 
/* background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);*/
  background-repeat: no-repeat;
  background-position: right top;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
}

我将标题高度设置为 2*viewhiegh 以便需要滚动条。

https://codepen.io/shaniemoonlight/pen/WNoQOXj

推荐阅读