Question

我正在尝试创建50％的拆分布局。左侧是文本，右侧是图像，它会从页面边缘渗出。

我可以轻松创建50％的布局，但希望文本区域不超过960px。

但是当您看到屏幕变小时，背景图像不会覆盖50％的页面。

必须有一个更好的方法来使图像覆盖并扩展到屏幕的右侧，我似乎无法思考今天如何！

我还希望图像在移动设备上显示在文本下方，所以也许img标签而不是背景图像会更好用？

我的代码如下：

<div class="about-top">

                    <div class="container">

                        <div class="section group">
                            <div class="col span_6_of_12">

                                <div class="content-left">
                                    <h1>Who is LCC?</h1>
                                    <h2>What can we do for your business?</h2>
                                        <hr></hr>
                                    <p><strong>LCC are a Leading National Cleaning and Support Services Provider who are passionate about our customer care and delivering a service that is real value for money.</strong></p>

                                    <p>We are committed to building strong, long term relationships with clients and also with the people who work for us. We have remained an independent contract cleaning company since our formation in 1997 with a sustainable profitable growth that is forecasted to continue.</p>

                                    <a href="#"><div class="button">work with us</div></a>
                                </div>
                            </div>
                        </div>

                    </div>

            </div>

CSS：

.container  {
    width:95%;
    max-width:960px;
    height:auto;
    margin:0 auto;
    position:relative;
}

.about-top  {
    width:100%;
    height:auto;
    background-image: url('http://placehold.it/500x500');
    background-position:right center;
    background-size:50%;
    background-repeat:no-repeat;
}

.content-left   {
    width:85%;
    padding:20% 15% 20% 0px;
}

hr {
    width:40px;
    margin:15px auto 15px 0px;
}

p { 
    font-family: 'montserratlight';
    font-size:15px;
    line-height:23px;
    color:#1f2223;
    margin-bottom:10px;
    letter-spacing:0px;
}

h1 {
    font-family: 'montserratlight';
    font-size:21px;
    line-height:24px;
    color:#005dab;
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:1px;
}

h2 {
    font-family: 'montserratlight';
    font-size:16px;
    line-height:21px;
    color:#939aaa;
    margin-bottom:6px;
    letter-spacing:0px;
}

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}

.span_6_of_12 {
    width: 49.2%; 
}

任何帮助将不胜感激！

利

Answer 1

您可以使用其中一个伪元素::before或::after来实现此目的。然后将您想要的背景应用于该特定元素。

您只需要修改一个CSS规则（.about-top）并为伪元素添加一个新规则。这就是你现在所拥有的：

.about-top  {
    width:100%;
    height:auto;
    background-image: url('http://placehold.it/500x500');
    background-position:right center;
    background-size:50%;
    background-repeat:no-repeat;
}

删除与背景相关的所有信息并添加position:relative，以便稍后定位伪元素：

.about-top  {
    width:100%;
    height:auto;
    position:relative;
}

现在将::after定义为父级中的绝对定位元素，因此它占据右侧，背景覆盖它（这样图像将不会被拉伸，尽管您可能会丢失某些部分它们会被删除）：

.about-top:after {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:50%;
    height:100%;
    background-image: url('http://placehold.it/500x500');
    background-position:center center;
    background-size:cover;
    z-index:-1; /* this is to send the element to the back */
}

以下是代码（您也可以在此JSFiddle上看到它）：

.container	{
  width:95%;
  max-width:960px;
  height:auto;
  margin:0 auto;
  position:relative;
}

.about-top	{
  width:100%;
  height:auto;
  position:relative;
  /*background-image: url('http://placehold.it/500x500');
  background-position:right center;
  background-size:50% 100%;
  background-repeat:no-repeat;*/
}

.about-top:after {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  background-image: url('http://placehold.it/500x500');
  background-position:center center;
  background-size:cover;
  z-index:-1;
}

.content-left	{
  width:85%;
  padding:20% 15% 20% 0px;
}

hr {
  width:40px;
  margin:15px auto 15px 0px;
}

p {	
  font-family: 'montserratlight';
  font-size:15px;
  line-height:23px;
  color:#1f2223;
  margin-bottom:10px;
  letter-spacing:0px;
}

h1 {
  font-family: 'montserratlight';
  font-size:21px;
  line-height:24px;
  color:#005dab;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:1px;
}

h2 {
  font-family: 'montserratlight';
  font-size:16px;
  line-height:21px;
  color:#939aaa;
  margin-bottom:6px;
  letter-spacing:0px;
}

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
  content:"";
  display:table;
}
.group:after {
  clear:both;
}

.span_6_of_12 {
  width: 49.2%; 
}

<div class="about-top">

  <div class="container">

    <div class="section group">
      <div class="col span_6_of_12">

        <div class="content-left">
          <h1>Who is LCC?</h1>
          <h2>What can we do for your business?</h2>
          <hr></hr>
        <p><strong>LCC are a Leading National Cleaning and Support Services Provider who are passionate about our customer care and delivering a service that is real value for money.</strong></p>

        <p>We are committed to building strong, long term relationships with clients and also with the people who work for us. We have remained an independent contract cleaning company since our formation in 1997 with a sustainable profitable growth that is forecasted to continue.</p>

        <a href="#"><div class="button">work with us</div></a>
      </div>
    </div>
  </div>

</div>

50％分割布局与图像

1 个答案: