Наслоение фона, цвета фона и текста - PullRequest
Новая
       0

Наслоение фона, цвета фона и текста

0 голосов
/ 23 мая 2018

Я хочу синий фон с изображением над фоном, а затем текст над изображением.

Вот код: 

body {
  background-color: blue;
}

#some-text {
  color: red;
  z-index: 3;
}

#display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('./some-image.jpg'); 
  z-index: 2;
 }
<body>
 <div id="some-text">TEXT</div>
 <div id="display"></div>
<body>

Что доставляет мне неприятности, так это то, что текст имеет синий фон.

Установка прозрачного фона текста не исправляет его.

Что я здесь не так делаю?

Ответы [ 3 ]

0 голосов
/ 23 мая 2018

Вы можете использовать несколько фонов, как это: 

body {
 margin:0;
 height:100vh;
 line-height:100vh;
 background-image:url(https://picsum.photos/200/200?image=1069);
 background-position:center;
 background-size:auto;
 background-repeat:no-repeat;
 background-color:green;
 text-align:center;
 color:#fff;
 font-size:25px;
}
Some text here
0 голосов
/ 24 мая 2018

Установите div с идентификатором #some-text на position: relative, также вам нужно указать div с идентификатором #display a width и height. 

body {
  background-color: blue;
}
#some-text {
  color: red;
  z-index: 3;
  position: relative;
}
#display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('http://via.placeholder.com/350x150'); 
  z-index: 2;
  height: 100%;
  width: 100%;
}
<body>
  <div id="some-text">TEXT</div>
  <div id="display"></div>
</body>
0 голосов
/ 23 мая 2018

Установите цвет фона # some-text div на белый. 

#some-text {
    color: red;
    z-index: 3;
    background-color: white;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...