Смешайте в оверлее изображения и текст с фоном - PullRequest
0 голосов
/ 11 апреля 2020

Можно ли смешать цвет фона текста с наложением изображения?

Цвет фона точно такой же для наложения и фона текста, rgba (0,0,0 , 0,7), но когда они находятся один над другим, становится темнее.

Спасибо!

image

<div class="banner">
  <div class="header__text-box">
    <h1 class="heading-primary">
      <span class="heading-primary--main">Frontend</span>
      <span class="heading-primary--sub">Developer</span>
    </h1>
  </div>
</div>



.banner {
  position: relative;
  background: url(https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/847d1434030470.56c3460d9454b.jpg?raw=true)
    no-repeat;
  background-size: cover;
  background-position: center center;

  &:before {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 60% 100vh, 0 100%);
    z-index: 1;
  }
}



.heading-primary {
  &--main {
    color: #d9b200;
    display: inline-block;
    font-family: sans-serif;
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 1.2rem;
    padding-left: 50px;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.7);
  }
}

Codepen с код: https://codepen.io/monica-fidalgo/pen/gOabQgx

1 Ответ

0 голосов
/ 11 апреля 2020

Если я понимаю вопрос, вы можете просто дать тексту rgba значение:

.bg-img{
    background: url(https://placekitten.com/400/300) center/cover;
    width: 400px;
    height: 300px;
}

.pane{
    width: 50%;
    height: 50%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    align-items:center;
    justify-content:center;
    margin: 20px 0 0 20px;
}

h2{
    color: rgba(255,255,255,0.4);
}
<div class="bg-img">
    <div class="pane">
        <h2>This is some text</h2>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...