Исправить div/кнопку/ссылку на фоновое изображение

У меня возникает раздражающая проблема, чтобы позиционировать элемент поверх фонового изображения. Скажем, у нас есть HTML как:Исправить div/кнопку/ссылку на фоновое изображение

<html> 
<head> 
</head> 
<body style = "margin: 0 auto;"> 
    <div style="background:url('image.png'); background-size:cover;"> 
     <button>Button </button> 
    </div> 
</body> 
</html>

Кнопка должна быть помещена в left: 50px; top: 100px; против исходного изображения, а потому, что на экране устройства (рабочий стол хром или IOS сафари) изменения, и background-size: cover; собственности, изображение фактически масштабируется , поэтому кнопка не появится в правильном положении. Я попробовал другой путь:

<html> 
<head> 
</head> 
<body style = "margin: 0 auto;"> 
    <div style="width:100%;"> 
     <img src="image.png" width="100%" /> 
     <button style="top: -100;z-index: 5;">Button </button> 
    </div> 
</body> 
</html>

Таким образом, страница может прокручиваться, потому что изображение может за высоты экрана после того, как я расположил кнопку в нужном месте, и заменен другим разрешением устройства, позиция была изменена еще раз.

Я также пробовал javascript, чтобы прослушать событие изменения размера, чтобы абсолютно позиционировать кнопку, она все еще имеет очевидную разницу между экранами рабочего стола и ios.

Как я могу это сделать? Заранее спасибо!

Редактировать: Если изображение масштабируется из-за разрешения экрана, я хочу, чтобы кнопка была масштабирована с одинаковым соотношением. Было бы здорово найти способ без сложного javascript.

источник

2015-02-14 jeffrey

Каковы размеры вашего изображения? – SaidbakR

Размеры могут быть: 640 * 1008. – jeffrey

Если вы хотите, изменение размера кнопки с масштабом страницы, так что вы должны добавить ширину и высоту стиля, что в% единице. Поскольку пиксель является фиксированным устройством на разных устройствах, но% зависит от разрешения устройства. И, наконец, вы можете добавить минимальную ширину и минимальную высоту или максимальную ширину и максимальную высоту в ваш стиль div, чтобы иметь хороший контроль над другими устройствами. Удачи.

источник

2015-02-14 16:54:28

Эта теория кажется правильной. – jeffrey

Добавить CSS position absolute ваших изображений и кнопку элементов. Таким образом, вы сможете установить свою позицию соответственно своему родительскому элементу <div>.

http://jsbin.com/mevuxizuzu/1/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div style="width:100%;"> 
     <img style="position:absolute" src="image.png" width="100%" /> 
     <button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button> 
    </div> 
</body> 
</html>

источник

2015-02-14 14:43:56 GibboK

http://jsbin.com/pemafigafa/2/ – SaidbakR

Спасибо за помощь. Однако, если вы измените разрешение браузера, например, с 1920 * 1080 до 640 * 1136, вы можете заметить, что положение кнопки на изображении изменилось. Я хочу, чтобы он был привязан к изображению, например, он первоначально находится на летучей мыши, независимо от масштаба изображения, он все еще находится на летучей мыши и его масштаб. Извините, если я не ясно сказал о ** против изображения **. – jeffrey

Вы можете использовать позицию: абсолютная; для вашей кнопки и установите правильное место с верхней и левой позицией с%, потому что ваша ширина и высота основаны на% не пикселей.

источник

2015-02-14 15:24:45

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head> 
<body> 
<div style="width:100%;"> 
     <img style="position:absolute" src="image.png" width="100%" /> 
     <button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button> 
    </div> 
</body> 
</html>

источник

2015-02-14 15:31:59

Попробуйте следующий код, который использует относительное положение для кнопки:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    button { 
     position: relative; 
     left: 20px; 
     top:100px; 
    } 
    .bd{ 
     background-image: url('http://lorempixel.com/650/1000/sports/1/'); 
     background-size: cover; 
     height: 1000px; 
     width: 650px; 

    } 
    </style> 
</head> 
<body> 
<div class="bd" style="width:100%;"> 
     <img style="position:absolute" src="" width="100%" /> 

     <button>Button </button> 
    </div> 
</body> 
</html>

Checkout это DEMO: http://jsbin.com/pemafigafa/3/

источник

2015-02-14 18:28:08 SaidbakR

Я сделал некоторые изменения, основываясь на этом и совете @ navid-nazarian: http://jsbin.com/favolipimu/2/. Это близко, но пока не идеально. Я подозреваю, что это не может быть сделано с некоторыми JS. – jeffrey

Исправить div/кнопку/ссылку на фоновое изображение

ответ

Смежные вопросы