2

Пытаюсь быстро сверстать, но тут столкнулся с проблемой: обрезается часть пластинки. Просто не догоняю почему. Помогите пж.

body {
  background-color: grey;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

.vinylwheel {
  width: 100%;
  height: 100%;
  background: no-repeat url("http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png");
  background-size: 100% auto;
  margin: auto;
}

.mid {
  border-radius: 50%;
  width: 32%;
  background: no-repeat url("https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/");
  background-size: 100% auto;
  background-position: center;
  margin: auto;
  transform: translateY(97%);
  text-align: center;
}

.btm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#play {
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: white;
  border: 0;
  text-align: center;
  display: inline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />

<div class="btn">
  <center>
    <button id="play">adf</button>
  </center>
</div>
<div class="vinylwheel">
  <div class="mid">
    <img src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/" alt="mid" style=" width: 100%; opacity: 0; visibility: hidden; z-index: -1;" />
  </div>
</div>

1
  • вы бы ещё картинку-макет показали бы , что должно получится ... не ясно для чего нужна чёрная картинка когда можно просто псевдо элементом закрасить чёрным цветом всё что угодно
    – user33274
    8 апр 2018 в 10:06

2 ответа 2

3

Так более красивее получается

* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.vinil {
  width: 30vw;
  height: 30vw;
  position: relative;
}

.vinil:before {
  content: "lensky";
  display: block;
  width: 9.3vw;
  height: 9.3vw;
  background: #aa0000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4.6vw;
  color: #fbfbfb;
  font-size: 2vw;
  text-align: center;
  line-height: 10vw;
  font-variant: small-caps;
  font-weight: 800;
}
<div class="vinil">
  <img src="http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png" alt="">
</div>

0
0

Потому-что высота блока с фоном меньше самой картинки

body {
  background-color: grey;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

.vinylwheel {
  width: 100%;
  height: 600px;
  background: no-repeat url("http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png");
  background-size: 100% auto;
  margin: auto;
}

.mid {
  border-radius: 50%;
  width: 32%;
  background: no-repeat url("https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/");
  background-size: 100% auto;
  background-position: center;
  margin: auto;
  transform: translateY(97%);
  text-align: center;
}

.btm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#play {
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: white;
  border: 0;
  text-align: center;
  display: inline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />

<div class="btn">
  <center>
    <button id="play">adf</button>
  </center>
</div>
<div class="vinylwheel">
  <div class="mid">
    <img src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/" alt="mid" style=" width: 100%; opacity: 0; visibility: hidden; z-index: -1;" />
  </div>
</div>

2
  • Вариант хороший, но а если height должен быть адаптивным? Просто если поставить height: 600px, то при уменьшении страницы внизу появится огромный отступ от пластинки.
    – Eugen Eray
    8 апр 2018 в 9:42
  • Тогда использовать тег img
    – user245150
    8 апр 2018 в 9:44

Ваш ответ

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

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