当我将该选项设置为 100% 时,背景图像不起作用。
我正在使用 angular 和 bootstrap 4。
<!--html code-->
<div class="bg">
<div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<router-outlet></router-outlet>
这是.scss代码
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("~/assets/jonatan-pie-226805-unsplash.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
最佳答案
我复制了您的代码并添加了一张图片,效果如下。
您是否使用了任何可以隐式地保持背景较小的东西?也许是 Bootstrap ?
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://www.placecage.com/g/1000/500");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!--html code-->
<div class="bg">
<div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<router-outlet></router-outlet>
关于html - 主页中的背景图像不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55910217/