배경 이미지에 투명도를 설정하는 방법은 무엇입니까?

제목에서 알 수 있듯이 이미지 자체의 투명도를 변경할 수 있는 방법은 없습니다. 이미지는 배경 이미지를 사용하여 CSS로 작성됩니다.

div{
    position: relative;        
}
div:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}

배경 이미지는 투명도가 있는 png입니다.

요소는 투명도를 배경으로 설정하고, 또 다른 요소가 이를 덮고 그 위에 게스트로 등장하여 이 요소의 내용인 척합니다.

CSS의 불투명도 속성은 이미지의 투명 속성을 설정할 수 있습니다.

#div{
    background-image: url(img.png);
    opacity:0.4;
    filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ }

유사한 시각적 효과를 얻기 위해 전체 DIV의 투명도만 변경할 수 있습니다.
1. 2. 호환이 가능하다면 css3 filter-webkit-filter를 사용하세요(이전 IE 필터와 다름).

이 웹사이트가 어떻게 구현되는지 보세요

Opacity in CSS background images

위 내용은 배경 이미지에 투명도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!