CSS와 김프를 사용한 투명한 배경

앱의 각 페이지에 투명한 배경 이미지를 추가하여 시각적인 관통 라인을 만들고 싶었습니다. this에서 Pixabay 오픈 소스 이미지를 찾았습니다.
앱에 필요한 에너지를 완벽하게 포착했습니다.


최소화된 반복 이미지로 각 페이지 하단에 추가하기로 결정했습니다. 그러나 완전히 불투명한 원본 이미지는 사용자의 시선을 끌었고 페이지 콘텐츠에서 주의를 분산시켰습니다. 불투명도를 줄이고 투명도를 높이면 사용자 경험이 향상됩니다.

앱에 배경 이미지 추가

먼저 루트 html 태그에 이미지를 background-image로 추가했습니다: body . 이제 내 CSS 파일은 다음과 같습니다.

body {
    background-image: url("./images/cleaning-1294867_1280.png");
}

CSS를 통한 불투명도

다음으로 CSSopacity 태그를 사용하여 불투명도를 추가하려고 시도했습니다.

body {
    background-image: url("./images/cleaning-1294867_1280.png");
    opacity: 0.3;
}

안타깝게도 CSSopacity 태그는 모든 하위 요소에도 적용됩니다. 배경 이미지는 전체 앱의 부모인 body 에 적용됩니다. 즉, body 에 불투명도를 추가하기만 하면 앱의 각 요소가 일치하는 불투명도로 렌더링됩니다. 이것은 읽기가 매우 어려웠습니다.



특히 의사 요소를 사용하여 이 문제에 대한 여러 가지 해결 방법이 있습니다. 정적으로 투명한 이미지를 원했기 때문에 이미지 자체를 원하는 투명도로 편집하고 편집된 이미지를 앱에 로드하기로 했습니다.

구조 김프!

GIMP은 데스크탑에 다운로드할 수 있는 무료 오픈 소스 사진 편집 서비스입니다.

김프에서 이미지를 엽니다. 전체 이미지의 투명도 및 불투명도를 편집하려면 아래 단계를 따르십시오. (이미지의 일부만 선택하려면 시도할 수 있습니다this tutorial )

1단계: 레이어 → 투명도 → 색상을 알파로 클릭



2단계: 이미지의 투명도와 불투명도를 편집할 수 있는 창이 열립니다.

투명도를 0.300으로 변경하고 불투명도를 1.000으로 유지했지만 이 옵션을 가지고 놀면서 최상의 조합을 찾을 수 있습니다. 적용하기 전에 변경 사항을 볼 수 있도록 "미리보기"를 클릭했는지 확인하십시오.



이미지에 만족하면 "확인"을 클릭하여 변경 사항을 적용합니다.

3단계: 마지막으로 이미지를 적절한 파일 형식으로 내보냅니다. 나는 .png를 선택했다.

(GIMP에서 "저장"을 클릭하면 이미지가 .xcf 파일로 저장됩니다.)

최종 세부 정보: 위치, 크기, 반복

이제 새로 편집한 이미지를 프로젝트로 가져오고 background-image URL을 업데이트하십시오. (opacity 태그를 추가했다면 반드시 제거하세요.)

원하는 추가 배경 스타일을 추가할 수 있습니다. 제 경우에는 다음을 구현했습니다.

background-size: 20% auto; - 배경 이미지 너비를 뷰포트의 20%로 설정하고 높이를 너비에 비례하여 자동으로 설정합니다

.

background-repeat: repeat-x; - 배경을 수평으로 반복합니다

.

background-position: bottom 5px center; - 화면 하단에서 5px 오프셋으로 배경을 배치합니다

.

background-attachment: fixed; - 스크롤과 관계없이 뷰포트의 지정된 위치에 배경을 고정합니다.

body {
    background-image: url("./images/tree-home-transparent.png");
    background-repeat: repeat-x;
    background-position: bottom 5px center;
    background-size: 20% auto;
    background-attachment: fixed;
  }

최종 제품: