如何將圖像放在bootstrap中的圖像上;

這是我的代碼：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class = "row text-center" style=""> 
 
     <div class="col-xs-6 text-center" style="background-color:none; margin-top:10px;"> 
 
     <img src="1.jpg" width="250" height="250"> 
 
     <img src="plus.png" width="50px" height="50px"> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

它的到來，如：

我的實際需要是加符號BOL在圖像上，像這樣：

來源

2016-02-04 Group

那麼你可能需要第二圖像與定位「的立場：絕對」，然後中心。通過設置

margin-top: 50%; 
margin-left: 50%; 
transform: translate(-50%,-50%);

對齊比其他圖像

不要忘記容器需要有位置：相對於包含「固定」圖像。

來源

2016-02-04 10:19:29

試試這個

CSS：

.product-holder { 
    position: relative; 
    display: block; 
} 

.plus-image { 
    left: 50%; 
    top: 50%; 
    position: absolute; 
    margin-top: -25px; 
    margin-left: -25px; 
}

HTML

<div class = "row text-center" style=""> 
    <div class="col-xs-6 text-center" style="background-color:none; margin-top:10px;"> 
     <div class='product-holder'> 
      <img src="1.jpg" width="250" height="250" class='product-image'> 
      <img src="plus.png" width="50px" height="50px" class='plus-image'> 
     </div> 
    </div> 
</div>

來源

2016-02-04 10:20:44 anurag

給位置是：絕對在你的圖標...

並將其移動圖像ü sing css

來源

2016-02-04 10:33:30

請提供一些代碼...請 – Group

如何將圖像放在bootstrap中的圖像上;

回答

相關問題