Как я могу получить фон CSS с изображением, которое имеет ширину 50% и имеет нижнюю часть и часть левой границы? - PullRequest
Новая
       18

Как я могу получить фон CSS с изображением, которое имеет ширину 50% и имеет нижнюю часть и часть левой границы?

0 голосов
/ 04 августа 2020

Мне нужно добиться чего-то вроде этого:

где этот серый квадрат на самом деле является изображением, которое можно изменить. это должно быть сделано с помощью фона, я не могу разместить там просто img. Я попытался добиться этого с помощью линейного градиента, что будет легко, если я могу просто установить фон для определенной области c, но тот факт, что то, что вы видите на изображении ниже, составляет ровно 50% фона, усложняет этот. Некоторое время я пробовал разные решения, но ничего не знаю.

фоновое изображение с некоторыми границами

1 Ответ

0 голосов
/ 04 августа 2020

Вы можете использовать CSS сетку , чтобы получить визуальные эффекты на вашем изображении: 

const img = document.getElementById('img')
img.style.backgroundImage = "url('http://placekitten.com/200/300')"
html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

.container {
  height: 100%;
  width: 100%;
  background: gray;
  display: grid;
  grid-template-columns: 1fr 10px 50%;
  grid-template-rows: 1fr calc(50% - 10px) 50px 10px 1fr
}

.img-wrapper {
  grid-column: 3 / 3;
  grid-row: 2 / 4;
  background: red;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}

.partial-border {
  grid-column: 2 / 4;
  grid-row: 3 / 5;
  background: blue;
}
<div class="container">
  <div class="partial-border"></div>
  <div id="img" class="img-wrapper"></div>
</div>
...