html - 如何停止背景图像的滚动效果
问题描述
我有一个带有背景图像的页面和上面的一些东西。上面的东西完全适合屏幕尺寸,不需要滚动。但由于背景图像是大滚动出现。如何解决?
#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>
解决方案
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>
推荐阅读
- python - 如果我们在二进制编码遗传算法上使用阶交叉算子会发生什么
- javascript - 将 YouTube 直播评论提取到 React 应用程序中
- python - 根据 Python 中特定列的值替换缺失值
- php - 使用 Backpack for Laravel 生成 crud 时出现 crudpanel 错误
- ubuntu - 安装NVIDIA驱动后,Ubuntu 20.0.4无法进入桌面
- node.js - 如何在 node.js 中生成视频缩略图并将其保存为缓冲区?
- python - 为什么我的 Pygame 脚本没有正确填充屏幕?
- python-3.x - 如何在条件语句中获取项目的值?
- bash - 多个 greps 和 sed 在文件中使用管道
- css - 覆盖外部样式表而不访问