CSS가 배경 이미지와 불투명도를 단일 속성에 결합할 수 있나요?

배경 이미지와 불투명도를 하나의 속성으로 설정할 수 있나요?

CSS를 사용하면 배경 투명도와 배경 이미지를 별도로 설정할 수 있는데 어떻게 해야 할까요? 투명한 배경 이미지를 얻으셨나요?

예 시나리오:

완전 불투명하게 사용할 경우 배경으로 시각적으로 압도적인 이미지를 고려해 보세요. 보다 미묘한 효과를 얻으려면 불투명도를 약 0.2로 낮추는 것이 좋습니다.

기존 접근 방식:

배경 이미지 속성만 사용하면 이미지의 투명도가 조정되지 않습니다. .

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

해결책: 의사 요소 해킹

투명한 배경 이미지를 만들려면 의사 요소를 활용하세요.

#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;
}

설명:

• :after pseudo-element가 #main div 내에 새 요소를 생성합니다.
• 콘텐츠가 없습니다. (content: "")이므로 시각적으로 눈에 띄지 않습니다.
• 절대적으로 #main의 왼쪽 상단에 위치하며 전체 영역을 덮습니다.
• 불투명도를 0.2로 줄여 배경을 만듭니다. 이미지는 투명합니다.
• z-index -1은 #main의 콘텐츠 뒤에 이미지를 배치합니다.

위 내용은 CSS가 배경 이미지와 불투명도를 단일 속성에 결합할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!