Вопрос:
Мне нужно поместить изображение поверх другого изображения.
Это мой код:
<!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>
Он пришел как:
Моя фактическая потребность – символ плюса над изображением, например:
Лучший ответ:
Ну, вам, вероятно, нужно поместить второе изображение с «position: absolute» а затем центрировать его по другому изображению, установив
margin-top: 50%; margin-left: 50%; transform: translate(-50%,-50%);
Не забывайте, что в контейнере должно быть position: relative «fixed» изображения.
Ответ №1
Попробуй это
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> Ответ №2
дать позицию: абсолютная на вашей иконке…
и переместите его на изображение с помощью css
