如何停止背景图像的滚动效果答案

【问题标题】：How to stop scrolling effect for background image如何停止背景图像的滚动效果
【发布时间】：2019-06-23 08:47:19
【问题描述】：

我有一个页面，上面有一张背景图片和一些东西。上面的东西完全适合屏幕尺寸，不需要滚动。但由于背景图像是大滚动出现。如何解决？

#bg-img {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<v-content>
  <!-- <v-container> -->
  <v-layout @click="closeform">
    <v-flex>
      <img id="bg-img" class="white--text" height="100%" src="https://image.shutterstock.com/image-photo/set-badminton-shuttlecock-feather-professional-450w-1030859371.jpg"/>
    </v-flex>
  </v-layout>
  <v-container grid-list-md text-xs-center class="bg-text" @click="closeform">
    <h2>Hey </h2>
  </v-container>
</v-content>

【问题讨论】：

你能提供代码吗？
@Evil_Sperm：您必须发布您尝试过的代码，以便我们可以轻松理解以解决您的问题。
我在 codepen 中尝试了您的代码，但我看不到背景图像，无论如何您是否尝试过“背景位置：包含；” ???
@JoykalInfotech 没用 :(
这是您的代码的结果（将<v-img> 更改为<img/>）：codverter.com/src/… 我看不到您描述的问题。

标签： html css vue.js vuetify.js

【解决方案1】：

你可以使用 background-position 属性，

background-attachment: fixed;

【讨论】：

@Evil_Sperm 使用位置：固定属性。
当更改为固定图像时消失了

【解决方案2】：

background 属性都不起作用，它是<img/> 标记。您需要为此使用background-image。

【讨论】：

【解决方案3】：

body {
  background-image: url(https://image.shutterstock.com/image-photo/set-badminton-shuttlecock-feather-professional-450w-1030859371.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100%;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<v-content>
  <!-- <v-container> -->
  <v-container grid-list-md text-xs-center class="bg-text" @click="closeform">
    <h2>Hey </h2>
  </v-container>
</v-content>

【讨论】：

可以看到滚动条出现了。但这不应该出现，因为图像很大，如果需要，滚动应该只出现在文本中。
@Evil_Sperm 不，我添加了margin:300px auto;。我删除了这一行

【解决方案4】：

div {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 90vh;
}

<div style="background-image: url('https://images.unsplash.com/photo-1548707519-f5221b5a5fd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1265&q=80');"></div>

【讨论】：