CSS로 투명한 배경 이미지를 어떻게 만들 수 있나요?

배경에 투명한 이미지 오버레이

웹 디자인에서 이미지를 배경으로 추가하면 미적 매력이 향상됩니다. 그러나 때로는 이미지가 너무 밝거나 투명도 조정이 필요할 수 있습니다. 하나의 CSS 속성에 배경 이미지와 불투명도를 결합할 수 있나요?

이미지 투명도와 배경 이미지 설정을 별도로 설명하고 있는 참고 자료에도 불구하고 이를 결합하여 투명한 배경 이미지를 만드는 것은 가능합니다.

다음 예를 고려하십시오.

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

이 코드는 지정된 URL의 이미지를 ID가 "main"인 요소의 배경으로 설정합니다. 그러나 불투명도 조정은 허용되지 않습니다.

투명한 배경 이미지를 얻으려면 다음 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;
}

이 코드에서:

1. position: 상대 요소는 상위 요소(#main)에 추가되어 다음 의사 요소의 절대 위치 지정을 허용합니다.
2. A 배경 이미지를 오버레이하기 위해 의사 요소(#main:after)가 생성됩니다.
3. 콘텐츠 속성은 의사 요소 내부에 텍스트나 콘텐츠가 표시되지 않도록 빈 문자열로 설정됩니다.
4. 의사 요소에는 위치: 절대를 사용한 절대 위치 지정이 제공되어 상위 요소를 오버레이할 수 있습니다.
5. 배경 이미지 속성은 #기본 요소의 URL과 동일한 URL로 설정됩니다. 배경 이미지, 상위 요소를 오버레이하는 이미지가 생성됩니다.
6. opacity : 0.2는 투명도 수준을 20%로 설정합니다. 이 값을 조정하면 이미지의 불투명도가 변경됩니다.
7. z-index: -1은 의사 요소가 상위 요소의 콘텐츠 뒤에 위치하도록 보장합니다.

이 방법을 사용하면 배경 이미지를 선택하고 불투명도를 조절하여 콘텐츠를 압도하지 않는 투명한 이미지로 시각적으로 매력적인 디자인을 만들 수 있습니다.

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