我在html
标签上使用了背景img
,但img
不在中间。我使用background size: cover;
,但它不能按照我希望的方式工作
<section class="section-a">
<h1 class="main-header-sec-a">Bienvendio a Vida Excotica</h1>
</section>
.section-a{
background-image: url('/img/waffles.jpeg');
min-height: 100%;
height: 700px;
background-size: cover;
}
这就是结果
这就是我的东西
发布于 2018-07-09 05:15:28
发布于 2018-07-09 05:09:04
尝试添加以下内容:
background: url(images/image.jpg) no-repeat 50% 50%;
发布于 2018-07-09 06:17:04
实际上,您可以使用background-size: cover;
,但因为这通常会剪切图像,所以还必须指定background-position
属性。所以你的代码会是这样结束的:
#myDivID {
background: url(myImageUrl);
background-size: cover;
background-position: center;
}
此外,如果您想要提高与旧版本浏览器的兼容性,您可以使用背景大小前缀,并在代码中附加以下内容:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
在这里查看完整的代码:https://jsfiddle.net/awrstbn9/9/当然还有其他方法可以实现这一点,但(在我看来)这是推荐的方法。
https://stackoverflow.com/questions/51235982
复制相似问题