我有一个网格布局内的背景图像的问题。当前背景图像停留在容器内部,如下所示:
但是,我希望图像向左延伸到视口的边缘,如下所示:
我似乎想不出该怎么做。到目前为止,我的代码如下:
.container {
max-width: 1200px;
margin: 0 auto;
}
.flex-tier .grid-col-1 {
position: relative;
background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.flex-tier .grid-col-1,
.flex-tier .grid-col-2 {
padding: 20px;
}
.container#grid-tier {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: auto auto;
}
<div id="grid-tier" class="flex-tier container ">
<div class="grid-col-1">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
</div>
</div>
<div class="grid-col-2">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
</div>
</div>
</div>
下面是一个包含我的代码的jsfiddle。任何解决方案都将不胜感激!
发布于 2018-08-05 09:11:16
您应该为图像使用另一个容器
<div id="image60"></div>
<div id="grid-tier" class="flex-tier container ">
<div class="grid-col-1">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
</div>
</div>
<div class="grid-col-2">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur
nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna.
Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros
mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
</div>
</div>
</div>
.container {
max-width: 1200px;
margin: 0 auto;
}
#image60 {
position: absolute;
width: 60%;
height: 100%;
background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.flex-tier .grid-col-1 {
position: relative;
/* background-image: url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;*/
overflow: hidden;
}
.flex-tier .grid-col-1,
.flex-tier .grid-col-2 {
padding: 20px;
}
.container#grid-tier {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: auto auto;
}
在jsfiddle中检查它
https://stackoverflow.com/questions/51690657
复制相似问题