CSS 이미지 투명/불투명

CSS를 사용하여 쉽게 투명한 이미지를 만드세요.

참고 : CSS 불투명도 속성은 W3C의 CSS3 권장 사항의 일부입니다.

예제 1 - 투명한 이미지 만들기

CSS3의 투명도 속성은 opacity입니다.

먼저 CSS를 사용하여 투명한 이미지를 만드는 방법을 보여드리겠습니다.

일반 이미지

투명도가 포함된 동일한 이미지:

예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img
 {
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
 }
    </style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>

프로그램을 실행하여 확인하세요.

아래 CSS를 보세요.

cityimg
{
오파: 0.4 ;
filter:alpha(opacity=40); /* IE8 이하의 경우 */
}

IE9, Firefox, Chrome, Opera 및 Safari 브라우저는 투명도 속성을 사용하여 이미지를 불투명하게 만듭니다. 불투명도 속성 값의 범위는 0.0 - 1.0입니다. 값이 작을수록 요소가 더 투명해집니다.

IE8 및 이전 버전에서는 필터: 알파(불투명도=x)를 사용합니다. x가 취할 수 있는 값은 0~100이다. 값이 낮을수록 요소가 더 투명해집니다.

예 2 - 이미지 투명도 - 호버 효과

예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img
 {
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
 }
        img:hover
 {
            opacity:1.0;
            filter:alpha(opacity=100); /* For IE8 and earlier */
 }
    </style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>

CSS 스타일:

img
{
opacity:0.4;
filter:alpha(opacity=40) /* IE8의 경우 그리고 이전 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100) /* IE8 이하의 경우 */
}

첫 번째 CSS 블록은 예제 1의 코드와 유사합니다. 또한 사용자가 이미지 중 하나 위로 마우스를 가져가면 어떤 일이 발생하는지 추가했습니다. 이 경우 사용자가 이미지 위로 마우스를 가져가면 이미지가 선명해지기를 원합니다.

이 CSS는 다음과 같습니다. opacity=1.

IE8 및 이전 사용: filter:alpha(opacity=100).

마우스 포인터가 이미지에서 멀어지면 이미지가 다시 투명해집니다.

예 3 - 투명한 상자에 담긴 텍스트

텍스트가 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다. 텍스트는 투명한 상자에 들어 있습니다.

소스코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div.background
 {
            width:500px;
            height:250px;
            background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
            border:2px solid black;
        }
        div.transbox
 {
            width:400px;
            height:180px;
            margin:30px 50px;
            background-color: #fcffe0;
            border:1px solid black;
            opacity:0.6;
            filter:alpha(opacity=60); /* For IE8 and earlier */
 }
        div.transbox p
 {
            margin:30px 40px;
            font-weight:bold;
            color:#000000;
        }
    </style>
</head>
<body>
<div class="background">
    <div class="transbox">
        <p>人生就像一张纸，行走间，如素笺染墨。每一次经历都是一笔浓墨或淡彩;每一次成功或挫折，每一次心跳都是一个不同凡响的音符，淡然或张狂，如那枝上的鸟儿，可以自由恋爱，倾心欢唱，即使这素淡的冬日，也有余韵绕梁……
        </p>
    </div>
</div>
</body>
</html>