배경 이미지 투명 처리(이미지를 원하는 색상과 레이어링)

기사로 만든 배경

Rails에서 배경 이미지를 표시할 때 그대로 출력하면 주장이 강한 경우가 있겠지요. 그래서, 표시하는 색을 얇게 하는 방법을 설명합니다.

<원본 이미지>

<※ 편집 후>

환경

품목
내용


OS.Catalina
v10.15.4

루비
v2.5.1

Ruby On Rails
v5.2.4.3

대응 절차

다음 소스를 붙여 넣습니다.

test.scss

.contents_1p{
  height: 100vh;
  width: 100%;
  //railsなので、app/assets/imagesの配下に画像を設置する
  background-image: image-url('test.jpg');
  //白色を貼り付けて、透過させる。これは青や、緑でも対応可能
  background-color:rgba(255,255,255,0.7);
  //混合モードの指定になります。
  background-blend-mode:lighten;
  //ついでに画像をページ全体に表示する
  background-size: 100%;
}

참고문헌

background-blend-mode
Background-image(배경 이미지)를 투과시키는 CSS

이상입니다.