CSS에서 이미지 투명/불투명 효과를 얻는 방법
Apr 24, 2023 pm 02:47 PMCSS 이미지를 투명하거나 불투명하게 만드는 것은 웹 개발에서 일반적으로 사용되는 기술 중 하나입니다. 이미지를 투명하게 처리하면 웹 사이트를 더욱 아름답고 전문적으로 만들 수 있으며 웹 사이트의 시각 효과와 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 CSS에서 이미지의 투명 및 불투명 효과를 얻는 방법을 자세히 소개합니다.
1. CSS 이미지 투명성 소개
투명성은 요소와 배경의 투명도를 설정하여 요소나 배경을 표시하거나 숨길 수 있는 CSS3의 속성입니다. 요소 투명도는 opacity 속성을 통해 설정할 수 있으며, 이는 이미지뿐만 아니라 모든 요소에 적용될 수 있다는 점은 주목할 만합니다.
투명도 속성 값은 0(완전 투명)에서 1(완전 불투명) 사이의 숫자입니다. 예를 들어 이미지의 투명도를 0.5로 설정하면 이미지의 투명도는 50%가 됩니다.
2. 이미지 투명도 효과를 얻기 위한 CSS
1. 투명도
가장 일반적인 방법은 투명도 속성을 사용하는 것입니다. CSS에서 불투명도 속성을 다음과 같이 사용할 수 있습니다.
img{ opacity:0.5; }
여기서 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다. 백분율을 사용하여 투명도를 표현할 수도 있습니다. 예를 들어 0.5는 50% 투명도를 의미합니다.
이 방법은 모든 배경과 콘텐츠에 적용되며 배경색
의 투명도를 높여 배경의 불투명도에 영향을 줄 수 있습니다. background-color
的透明度来影响背景的不透明度。
2.应用伪元素
在下面的例子中,我们使用伪元素来实现图片的透明度。首先我们使用position:relative
属性将父元素相对定位,然后使用position:absolute
将伪元素绝对定位到父元素的顶部。我们给伪元素添加background-color
和opacity
属性,从而使图片显示为半透明的状态。
<style> .parent { position: relative; display: inline-block; } .parent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; z-index: 1; } .parent img { position: relative; z-index: 2; } </style> <div class="parent"> <img src="https://picsum.photos/200" alt="图片"> </div>
3.混合模式
混合模式是一种在两个或多个层之间创建视觉效果的CSS属性。使用mix-blend-mode
position:relative
속성을 사용하여 상위 요소를 상대적으로 배치한 다음 position:absolute
를 사용하여 의사 요소를 상위 요소의 맨 위에 절대적으로 배치합니다. 이미지가 반투명하게 보이도록 의사 요소에 background-color
및 opacity
속성을 추가합니다.
<style> .parent { position: relative; display: inline-block; } .parent img { mix-blend-mode: multiply; } </style> <div class="parent"> <img src="background.jpg" alt="背景图片"> <img src="foreground.png" alt="前景图片"> </div>
mix-blend-mode
속성을 사용하세요. "곱하기", "스크린", "오버레이", "하드 라이트" 등과 같은 다양한 유형의 혼합 모드가 있습니다. 예를 들어 전경 이미지를 배경 이미지에 혼합합니다:
<style> .parent { position: relative; display: inline-block; } .parent img { opacity: 0.8; transition: opacity 0.3s ease-in-out; } .parent:hover img { opacity: 1; } </style> <div class="parent"> <img src="https://picsum.photos/200" alt="图片"> </div>
위 내용은 CSS에서 이미지 투명/불투명 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











React Reconciliation 알고리즘은 어떻게 작동합니까?

useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까?

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까?
