無法設計一個HTML/CSS塊，不能讓圖像使用對齊引導

我試圖設計瞭如下塊，在圖像給出無法設計一個HTML/CSS塊，不能讓圖像使用對齊引導

建設的背景圖片是從人分開圖像，我如何使用引導網格系統以這種方式對齊圖像和文本，還要保持圖像的縱橫比？

背景圖像擴展到100％，但內容和人的形象爲中心，並與其他內容

來源

2016-12-01 Jaskaran Singh Puri

請添加一些代碼 –

我認爲你可以使用CSS添加的建築背景，並使用HTML人體圖像插入它，你會取得相同的佈局。嘗試使用位置來設置人物圖像的風格 –

將建築物圖像作爲背景，然後將具有背景圖像的div與人物圖像一起顯示爲透明png，然後在另一個div中顯示文本內容。但是如果沒有你一直在工作的代碼，看不到你的問題是不可能的。 –

對準有了這個設計，你不（海峽向前即到）機械手會搞亂你的網格佈局。或者合併圖像，或者使用將保留在網格內的較小版本的人體圖像（所有塊都是帶有Bootstrap的正方形，並且除了父元素的背景圖像之外沒有分層）。

*編輯由於Kishore Kumar指出，你可以。事情是這樣的：

<body> <!-- has CSS background with buildings --> 
    <div class="container"> <!-- has CSS background with human, float: right --> <div class="row"> 
      <div class="col-md-3">And more stuff for layout...</div> 
     </div 
    </div> 
</body>

來源

2016-12-01 08:50:03 Flummox

那麼我怎麼設計它？ –

'background-image：'image.jpg'background-position：'stuff'' – Roberrrt

建築物使用圖片作爲背景，用於body標籤，併爲任何.container或.row類的背景人的形象。

此外，人體圖像應該正確對齊。

喜歡的東西

body { 
 
    /* image just for reference*/ 
 
    background: url('http://www.eliteconcreterestoration.com/blog/wp-content/uploads/concrete-office-park-buildings.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
.container { 
 
    height: 100%; 
 
    /* image just for reference*/ 
 
    background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS2-Dj0_UAhag-zIDaVGoV2LuCIy62nGvt_zNJoeILF1VqM3EXOdK20qR6N'); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
} 
 
.jumbotron { 
 
    background: transparent !important; 
 
} 
 
.jumbotron h1 { 
 
    font-size: 36px; 
 
    color: white !important; 
 
} 
 

 
.jumbotron .text{ 
 
    color:white; 
 
    font-size:12px; 
 
}

<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="jumbotron"> 
 
     <h1>A good <span style="color:lightgreen;">investment</span> pays the best <span style="color:orange;">interest</span></h1> 
 
     <p class="text">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> 
 
     <p><a class="btn btn-primary btn-lg" style="background:lightgreen;" href="#" role="button">Register</a><a class="btn btn-primary btn-lg" style="background:orange;" href="#" role="button">Learn more</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-01 08:58:03

下面是我會怎麼做。

創建一個部分，並給它的背景圖像與background-size: cover;屬性，然後使用容器內的部分，並把我的網格。

<section class="building-bg"> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-8"> 
 
\t \t \t \t <!-- text content --> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <!-- png image with some negative margins or translate property --> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</section>

來源

2016-12-01 09:09:42 Aslam

無法設計一個HTML/CSS塊，不能讓圖像使用對齊引導

回答

相關問題