当屏幕分辨率较低时，背景中的图像会被裁剪
发布于2025-01-19 22:37 阅读(474) 评论(0) 点赞(15) 收藏(1)
.banner-1{
background: #f0f0f0;
}
.pcontainer {
background: url(https://i.imgur.com/R1tpEs7.png);
background-repeat: no-repeat;
background-size: cover;
margin-right: 32px;
margin-top: 122px;
padding-top: 61px;
padding-bottom: 56px;
padding-left: 44px;
}<div class="container-fluid banner-1">
<div class="row">
<div class="col">
<div class="triangle-down"></div>
<div class="row">
<div class="col offset-md-6 pcontainer">
<h2>Why Move to Websphere Commerce v9</h2>
<p class="one">Give customers the ability to seamlessly move between channels to browse and buy when, where and how it’s most <span><a href="#">convenient</a></span> for them. </p>
<p class="two">IBM Watson Commerce’s innovation ecosystem offers complete and deep <br>capabilities so you gain maximum impact from every customer interaction and transaction.</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
Learn More
</button>
</div>
</div>
</div>
</div>
</div>我创建了一个容器banner-1。在容器下，我创建了另一个容器pcontainer，其背景图像是一个矩形。现在我面临的问题是，每当我在移动设备/平板电脑上测试时，矩形图像中的折叠都会被裁剪掉，但在桌面网站上，它会显示整个宽度。有没有办法让裁剪后的图像不显示在背景中。我希望在背景中显示带有折叠的完整图像。
解决方案
尝试删除边距pcontainer：
.banner-1 {
background: #f0f0f0;
}
.pcontainer {
background: url(https://i.imgur.com/R1tpEs7.png);
background-repeat: no-repeat;
background-size: cover;
margin-right: 0;
margin-top: 0;
padding-top: 61px;
padding-bottom: 56px;
padding-left: 44px;
}<div class="container-fluid banner-1">
<div class="row">
<div class="col">
<div class="triangle-down"></div>
<div class="row">
<div class="col offset-md-6 pcontainer">
<h2>Why Move to Websphere Commerce v9</h2>
<p class="one">Give customers the ability to seamlessly move between channels to browse and buy when, where and how it’s most <span><a href="#">convenient</a></span> for them.</p>
<p class="two">IBM Watson Commerce’s innovation ecosystem offers complete and deep
<br>capabilities so you gain maximum impact from every customer interaction and transaction.</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
Learn More
</button>
</div>
</div>
</div>
</div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538959/8cb0b89dbb624c216d2b/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力