배경 이미지 투명 처리(이미지를 원하는 색상과 레이어링)
기사로 만든 배경
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
이상입니다.
Reference
이 문제에 관하여(배경 이미지 투명 처리(이미지를 원하는 색상과 레이어링)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dichikawa/items/a1b771e70fcbbb613be2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
