웹 프론트엔드 프런트엔드 Q&A CSS에서 이미지 투명/불투명 효과를 얻는 방법

CSS에서 이미지 투명/불투명 효과를 얻는 방법

Apr 24, 2023 pm 02:47 PM

CSS 이미지를 투명하거나 불투명하게 만드는 것은 웹 개발에서 일반적으로 사용되는 기술 중 하나입니다. 이미지를 투명하게 처리하면 웹 사이트를 더욱 아름답고 전문적으로 만들 수 있으며 웹 사이트의 시각 효과와 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 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-coloropacity属性,从而使图片显示为半透明的状态。

<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

2. 의사 요소 적용

아래 예에서는 의사 요소를 사용하여 이미지 투명성을 구현했습니다. 먼저 position:relative 속성을 ​​사용하여 상위 요소를 상대적으로 배치한 다음 position:absolute를 사용하여 의사 요소를 상위 요소의 맨 위에 절대적으로 배치합니다. 이미지가 반투명하게 보이도록 의사 요소에 background-coloropacity 속성을 ​​추가합니다.

<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>
로그인 후 복사
3. 블렌딩 모드

블렌딩 모드는 두 개 이상의 레이어 사이에 시각적 효과를 만드는 CSS 속성입니다. 두 개 이상의 레이어 색상을 함께 혼합하여 시각적 효과를 만들려면 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>
로그인 후 복사
4. 투명도 및 의사 클래스🎜🎜마지막으로 의사 클래스 및 투명도 속성을 통해 아름다운 효과를 얻을 수 있습니다. 아래 예에서는 투명도를 0.8로 설정한 다음 hover 의사 클래스를 추가하여 투명도 값을 변경합니다. 이렇게 하면 마우스를 이미지 위로 이동하면 이미지가 더 선명해지고, 마우스를 멀리 이동하면 반투명해집니다. 🎜rrreee🎜3. 요약🎜🎜위는 CSS 이미지의 투명 및 불투명 효과를 얻는 여러 가지 방법입니다. 이러한 기술은 웹사이트의 시각적 요소를 아름답게 하고, 사용자 경험을 향상시키며, 웹페이지에 보다 전문적인 모양과 느낌을 부여하는 데 사용될 수 있습니다. 이에 능숙하다면 웹 개발 작업에 보다 유연하고 효율적인 솔루션을 제공할 수 있을 것입니다. 🎜

위 내용은 CSS에서 이미지 투명/불투명 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

게으른 하중의 개념을 설명하십시오. 게으른 하중의 개념을 설명하십시오. Mar 13, 2025 pm 07:47 PM

게으른 하중의 개념을 설명하십시오.

React Reconciliation 알고리즘은 어떻게 작동합니까? React Reconciliation 알고리즘은 어떻게 작동합니까? Mar 18, 2025 pm 01:58 PM

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

useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까? useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까? Mar 19, 2025 pm 03:58 PM

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

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까? 카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까? Mar 18, 2025 pm 01:45 PM

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

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

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

각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오. 각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오. Mar 19, 2025 pm 01:46 PM

각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오.

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까? React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까? Mar 18, 2025 pm 01:57 PM

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

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까? usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까? Mar 19, 2025 pm 03:59 PM

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

See all articles