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

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

PHPz

풀어 주다： 2023-04-24 15:18:22

원래의

2465명이 탐색했습니다.

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-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

2. 의사 요소 적용

아래 예에서는 의사 요소를 사용하여 이미지 투명성을 구현했습니다. 먼저 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>

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!