我试图设置一个背景图像并将其设置为完整,但我只能看到它居中。
.wrapper-hero {
width: 100%;
height: auto;
max-width: 1920px;
}
.wrapper-hero .hero-image {
background: url('@{baseDir}images/hero-image.png') no-repeat top center;
background-size: contain;
background-repeat: no-repeat;
display: block;
background-size: cover;
height: 800px;
width: 1200px;
}
<div class="wrapper-hero">
<div class="hero-image"></div>
</div>
有什么想法吗?而且图像根本没有响应...
最佳答案
您多次使用 background-size
。试试这个代码。
.hero-image {
background: url('@{baseDir}images/hero-image.png') no-repeat center center fixed;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
关于css - 如何设置全宽和响应式背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50200590/