단일 CSS 속성으로 배경 이미지와 불투명도를 모두 설정할 수 있나요?

단일 속성에서 배경 이미지 및 불투명도 설정

질문:

단일 CSS 속성? 그렇다면 어떻게?

원본 이미지 문제:

제공된 이미지("tandem.jpg")가 너무 밝아서 불투명도를 줄이고 싶습니다. 배경으로 사용을 유지하면서 약 0.2로 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;
}

설명:

• 기본 요소(#main)의 하위 요소로 새 요소(#main:after)를 만듭니다. 이 요소는 배경 이미지를 오버레이하는 데 사용됩니다.
• 상위 요소를 기준으로 위치를 지정할 수 있도록 위치를 절대값으로 설정합니다.
• 빈 문자열을 설정하려면 콘텐츠 속성을 사용하세요. 이 요소를 효과적으로 보이지 않게 만들지만 배경 스타일을 유지할 수 있습니다.
• 원하는 배경 투명도 수준을 얻으려면 불투명도를 0.2로 설정하세요. 이미지.
• 주요 요소의 콘텐츠 뒤에 표시되도록 Z-인덱스를 -1로 설정하세요.

이 기술은 효과적으로 주 요소 위에 투명한 레이어를 만들어 배경을 보여줍니다. 지정된 불투명도의 이미지.

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