background-image에 레이어를 겹치는 방법에 대해.

WEB 사이트의 코팅을 하고 있으면, 「background-image에 레이어를 거듭한다」라고 잘 합니다. 가끔 하면 「어라? 뭐였지」라고 생각하거나 하고 시간을 걸려 버리므로 이 마음에 정리해 보았습니다.

다양한 방법이 있습니다.

조사해 보면 몇 가지 방법이 있습니다.

① 부모 요소에 background-image, 자식 요소에 레이어
② linear-gradient 사용
③ position을 사용하여 두 요소를 겹쳐

대체로 이 패턴의 기사가 걸릴까 생각합니다. 나 자신, 초학자의 무렵은 ③을 사용하고 있었습니다만 정직 메리트가 느껴지지 않고 w, 지금은 ①나 ②를 사용하고 있습니다.

이번에는 이 ①②에 초점을 맞추고 각각 메리트 단점을 써 가려고 합니다.

코드 비교

① 우선은 베이스로서 아무것도 없는 상태.

html

<div class="bgImage1">
  特に何もせず、イメージの中にテキストを配置しただけ<br>
  イメージの色の調整をしていないので、<br>
  文字がイメージと同化し非常に見えづらい。
</div>

css

/* 特に何もせず、イメージの中にテキストを配置しただけ */
.bgImage1{
  background-image: url(../img/image_1.jpeg);
}

표시한 화면이 이쪽↓



쓰여진 대로 문자가 뒤의 이미지와 동화해 보기 어렵습니다.

② 부모 요소에 반투명한 자 요소(레이어)를 겹치는 패턴

html

<div class="bgImage2"> 
  <div class="bgImage2__rayer"> 
    親要素に半透明な子要素(レイヤー)を重ねるパターン<br>
    単色の場合はこれがベストかも。<br>
    ただし、デメリットとして「子」の分だけ要素数が増える。
  </div>
</div>

css

/* 親要素に半透明な子要素(レイヤー)を重ねるパターン */
.bgImage2{
  background-image: url(../img/image_1.jpeg);
}
.bgImage2__rayer{
  background-color: rgba(255, 255, 255, 0.5);
}

하얀 마스크가 걸렸기 때문에 문자가 보기 쉬워졌습니다.
HTML의 요소수가 아이의 분, 증가 CSS도 추가했기 때문에 코드가 증가했습니다.
단지 사람에 따라서는 알기 쉬운 코드일지도 모르겠네요! 나는 싫다.

③ 하나의 요소에 이미지와 레이어를 함께 쓰는 패턴

html

<div class="bgImage3">
  ２番目と結果は一緒だが、コーティングに必要な要素数は１つだけ。cssも1行。<br>
  htmlはすっきりするが、cssは少しややこしい。<br>
  また「linear-gradient」はグラデーションを作るための値なのでcssの意味的に単色を扱う場合は微妙なところ。
</div>

css

.bgImage3{
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../img/image_1.jpeg);
}

결과는 ②와 같고, CSS는 조금만 까다롭게 되지만, HTML, CSS 모두 코드량이 줄어들었습니다.
다만 「linear-gradient」는 그라데이션을 만들기 위한 값이므로 css의 의미적으로 단색을 취급하는 경우는 미묘한 곳. 어쩌면 여기에서 거부 반응하는 사람 있을지도.
솔직히 취향이므로 절대는 없습니다만, 제 경우는 코드량이 줄어들기 때문에 이쪽 추천입니다.

덤

상기에서 추천한 단색으로의 「linear-gradient」입니다만, 본래는 그라데이션의 레이어를 거는데 사용합니다. 역시 이것을 사용하면 세련되게 되고, 만일 단색에서도 코드량이 줄어들면 좋을까라고 생각합니다.
여러 번 말하지만 솔직히 좋아합니다. 그것과 현장의 규칙에 따라서 일괄적으로 이것이 정답이라고는 단언할 수 없네요!

그라데이션의 표시와 코드는 이쪽↓



html

<div class="bgImage4">
  前者にもある通り、グラデーションのレイヤーをかける場合は「linear-gradient」一択だろう。<br>
  グラデーションをかけた方がおしゃれ感あるし、仮にグラデーション使わなかったとしてもhtmlの記述が減るなら単色で使っても問題ないと思う。<br>
  正直好みと、現場のルールによりますので一概にこれが正解とは言い切れないですね！
</div>

css

.bgImage4{
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), url(../img/image_1.jpeg);
  color: white;
}

끝까지 고맙습니다. 이런 일로 오랫동안 써 버렸습니다만 앞으로도 기술적인 것은 써 가고 싶습니다. 뭔가 있으면 코멘트 부탁드립니다.