2

body {
	background-image: url("https://imgur.com/GyWN7Z4.gif");
	background-size: cover;
}
.container {
  	left: 1130px;
  	top: 60%;
  	position: fixed; 
}
button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  </head>
  <body>
    <div class="container">
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
    </div>
  </body>
</html>

Нужно чтобы кнопки оставались внутри рамки меню gif при уменьшении разрешения экрана. Есть варианты? Точного позиционирования возможно достичь?

1
  • Вы отметить решением вариант @klifort. Это вариант правда решает вашу проблему? Странно, должно быть я не понял вопроса. Commented 5 дек. 2017 в 20:41

2 ответа 2

1

Вам нужно руками вычислить позицию, вот и все.

body {
  background-image: url("https://imgur.com/GyWN7Z4.gif");
  background-size: cover;
}

.container {
  width: 100vw;
  height: 0;
  padding-top: 56.25%;
  position: relative;
  left: 0;
  top: 0;
  z-index: 100;
}

.wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 31%;
  height: 46%;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>

<body>
  <div class="container">
    <div class="wrapper">
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
    </div>
  </div>
</body>

</html>

0

если надо на разных экранах тогда пишите в %. я поменял left на right и поставил в %, на других разрешениях экрана пишите @media.

body {
	background-image: url("https://imgur.com/GyWN7Z4.gif");
	background-size: cover;
}
.container {
  	right: 15%;
  	top: 60%;
  	position: fixed; 
}
button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  </head>
  <body>
    <div class="container">
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
      <button><div>ТЕКСТ ТЕКСТ ТЕКСТ</div></button>
    </div>
  </body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.