无法设计一个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块，不能让图像使用对齐引导

回答

相关问题