Question

我在网格布局内的背景图像有问题。当前，背景图像位于容器内部，如下所示：

但是我希望图像像这样向左延伸到视口的边缘：

我似乎不知道该怎么做。到目前为止，这是我的代码：

.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。任何解决方案将不胜感激！

Answer 1

您的容器设置为max-width:1200px;。
的背景不应该显示在父母或自己的外部。
还可以向子级添加overflow:hidden;，假定子级在容器的边缘到视口的左侧显示背景。

不可能发生，您的代码运行完美。

您可以使用来自该子对象的absolute伪对象，并从协调体top，right，bottom调整其大小，并尝试设置left的协调体通过calc()通过以匹配到视口的左边缘。

编码思想是：

.flex-tier .grid-col-1 {
  position: relative;/* to be reference for absolute children and pseudos */
}

.flex-tier .grid-col-1::before {
  content: '';
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100% - 60vw + 20px );/* where is the left edge about ? 
             start from the right (left:100% is equal to right:0 
             remove 60vw of the viewport that is the 60% ratio of your column at the minimum
             add your average margin */
  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;
}

在正在运行的演示或fiddle

下

* {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  border:solid;
}

.flex-tier .grid-col-1 {
  position: relative;
}

.flex-tier .grid-col-1::before {
  content: '';
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100% - 60vw + 20px );
  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,
.flex-tier .grid-col-2 {
  padding: 20px;
}

.container#grid-tier {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto;
}


below, the working demo or a [fiddle][1]

<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>

Answer 2

您应该使用其他容器存储图像

<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

中进行检查

如何将图像从网格容器扩展到视口边缘？

2 个答案: