我有一个页面,上面有背景图片,上面还有一些东西。上面的内容完全适合屏幕尺寸,不需要滚动。但是由于背景图像很大,所以出现了滚动。如何解决?
#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>
答案 0 :(得分:0)
您可以使用背景位置属性
background-attachment: fixed;
答案 1 :(得分:0)
background
属性都不起作用,它是一个<img/>
标记。为此,您需要使用background-image
。
答案 2 :(得分:0)
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>
答案 3 :(得分:0)
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>