CSS 투명도를 설정하는 방법은 무엇입니까? CSS 이미지의 투명도를 설정하는 세 가지 방법

CSS 투명도 설정은 웹 디자인에서 자주 사용됩니다. 때로는 더 아름다운 웹 페이지를 디자인하기 위해 웹 페이지의 내용이 보이지 않도록 이미지를 투명하게 만듭니다. 배경으로 더 아름답습니다. 그렇다면 css에서 투명도를 설정하는 방법은 무엇입니까? 오늘 이 기사에서는 CSS에서 이미지 투명도를 설정하는 방법을 공유합니다.

CSS에는 투명도 효과 설정과 관련된 두 가지 속성인 opacity와 rgba가 있습니다. (추천 동영상 강좌: css 튜토리얼)

이제 이 두 가지 속성을 사용하여 이미지 투명도 효과를 설정해 보겠습니다.

먼저 css

css:

.opacity1, .opacity2, .opacity_img { display: inline-block; }
.opacity1 { filter: Alpha(opacity=0); }
.opacity2 { filter: Alpha(opacity=50); }
.opacity_img { filter: Alpha(opacity=100); }
:root .opacity1 { opacity: 0; filter: none; }
:root .opacity2 { opacity: .5; filter: none; }
:root .opacity_img { opacity: 1; filter: none; }

html:

<p>
    <a href="#" class="opacity2">
        <img class="opacity_img" src="
        " />
    </a>
</p>
<p>
    <a href="#" class="opacity2">
        <img  class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" / alt="CSS 투명도를 설정하는 방법은 무엇입니까? CSS 이미지의 투명도를 설정하는 세 가지 방법" >
    </a>
</p>

효과는 다음과 같습니다.

참고: 현재 주류 브라우저는 불투명도:값 쓰기 방법, 값 값은 0~1이며, 0은 완전 투명, 1은 완전 불투명입니다. 하지만 이 작성 방법은 IE8 이하 버전에서는 지원되지 않으므로 필터를 통해 해결할 수 있습니다. filter:alpha(opacity=value), 값 범위는 0-100이며, 0은 완전히 투명하고 100은 완전히 불투명합니다. 위의 예와 같습니다.

CSS의 rgba에서 이미지 투명도를 설정하는 예를 다시 살펴보겠습니다.

html:

<div class="demo2-bg">
    <div class="demo2">背景图半透明，文字不透明<br />方法：定位+ background:rgba(255,255,255,0.3)</div>
</div>

css:

.demo2-bg{
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    position: relative;
}
.demo2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
    background:rgba(255,255,255,0.3);

효과는 다음과 같습니다.

참고: 이 방법은 브라우저 호환성이 좋습니다. 사진과 콘텐츠를 모두 사용할 수 있습니다. 배경 이미지의 반투명 효과를 쉽게 분리하여 구현할 수 있으며 텍스트, 테두리 등 스타일과 콘텐츠에 영향을 주지 않습니다. 중첩을 달성하기 위해 절대 위치 지정 스타일을 사용하는 div 레이어가 하나 더 있습니다.

배경 색상 값과 투명도를 설정하세요. 처음 세 개의 255는 RGB 검정을 나타내고 0.3은 30% 투명도를 나타냅니다.

마지막으로 이미지에 불투명 유리 효과를 설정하는 방법을 살펴보겠습니다.

<div class="demo1">背景图半透明，文字不透明<br />方法：背景图+ filter：blur</div>

.demo1{
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
}
.demo1:before{
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;/*-1 可以当背景*/
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

효과는 다음과 같습니다.

이 글은 여기서 끝납니다. CSS 이미지 처리 방법에 대한 자세한 내용은 여기를 참조하세요. css 매뉴얼을 참고하세요.

관련 권장사항:

이미지를 변경하려면 CSS 마우스 클릭을 하세요.

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