CSS의 불투명도 제어를 사용하여 투명한 배경 이미지를 어떻게 만들 수 있습니까?

불투명도 제어를 통한 투명한 배경 이미지

CSS에서 배경 이미지 설정과 불투명도 조정은 별도의 작업입니다. 그러나 이 두 가지를 결합하여 투명한 배경 이미지를 생성할 수 있습니다.

배경 이미지 및 불투명도 설정

배경 이미지를 설정하려면 유효한 이미지 URL과 함께 background-image 속성을 사용하세요. . 예:

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}

배경 이미지의 불투명도를 지정하려면 opacity 속성을 사용하세요. 값 범위는 0(완전 투명)부터 1(완전 불투명)까지입니다.

그러나 background-image 속성에 불투명도를 직접 적용하면 배경 자체에는 영향을 주지 않고 이미지에만 영향을 줍니다. 투명한 배경 이미지를 얻으려면 추가 단계가 필요합니다.

투명한 배경 레이어 만들기

배경 이미지 위에 투명한 레이어를 만들려면 다음 CSS를 사용하세요.

#main {
    position: relative;
}
#main:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
}

이 CSS에서:

• #main:after는 투명하게 될 의사 요소를 생성합니다. layer.
• position: 절대값은 레이어를 기본 요소 위에 배치합니다.
• opacity: 0.2는 레이어의 불투명도를 20%로 설정합니다.
• z-index: -1은 레이어는 기본 요소 콘텐츠 뒤에 있습니다.

이러한 CSS 기술을 결합하여 다음을 만들 수 있습니다. 정밀한 불투명도 제어로 투명한 배경 이미지를 제공합니다.

위 내용은 CSS의 불투명도 제어를 사용하여 투명한 배경 이미지를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!