50％分割佈局與圖像

Question

我想創建一個50％分割佈局。文字在左邊，右邊的圖像從頁面的邊緣流血。

我可以輕鬆創建50％的佈局，但希望文本區域不超過960像素。

我創造了這個： https://jsfiddle.net/hhwdnu3j/

但你可以看到，當屏幕變小的背景圖像不包括頁面的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 \t { 
 
    width:95%; 
 
    max-width:960px; 
 
    height:auto; 
 
    margin:0 auto; 
 
    position:relative; 
 
} 
 

 
.about-top \t { 
 
    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 \t { 
 
    width:85%; 
 
    padding:20% 15% 20% 0px; 
 
} 
 

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

 
p { \t 
 
    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>