문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Opacity / Transparency ======
<WRAP left notice 80%>
  * description : CSS Opacity / Transparency
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-30
</WRAP>
<WRAP clear></WRAP>
\\
''%%opacity%%'' 속성은 요소의 불투명도 / 투명도 (opacity / Transparency)를 지정합니다.\\
\\
=====Transparent Image===== 
''%%opacity%%'' 속성은 0.0 ~ 1.0 사이의 값을 가질 수 있습니다. 값이 낮을수록, 더 투명합니다.\\
====예제====
{{:wiki:css:css_note:imagetransparency.png?600|}}\\
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        #container {
            display: flex;
        }
    </style>
</head>
<body>
    <h1>Image Transparency</h1>
    <p>The opacity property specifies the Transparency of an element. The lower the value, the more transparent:</p>
    <br>
    <div id="container">
        <div>
            <p>Image with 20% opacity:</p>
            <img src="img_forest.jpg" alt="Forest" style="width: 190px; height:100px; opacity: 0.2;">
        </div>
        <div>
            <p>Image with 50% opacity:</p>
            <img src="img_forest.jpg" alt="Forest" style="width:190px;; height:100px; opacity: 0.5;">
        </div>
        <div>
            <p>Image with 100% opacity:</p>
            <img src="img_forest.jpg" alt="Forest" style="width:190px; height:100px; opacity: 1.0;">
        </div>
    </div>
</body>
</html>
</HTML>
\\
=====Transparent Hover Effect=====
''%%opacity%%'' 속성은 종종 ''%%:hover%%'' 셀렉터와 함께 쓰여 마우스 오버 시(on mouse-over) 불투명도를 변경합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>

<head>
    <style>
        #container {
            display: flex;
        }
        img {
            opacity: 0.5;
        }
        img:hover {
            opacity: 1.0;
        }
    </style>
</head>
<body>
    <h1>Image Transparency</h1>
    <p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
    <br>
    <div id="container">
        <img src="img_forest.jpg" alt="Forest" style="width: 190px; height:100px;">
        <img src="img_mountains.jpg" alt="Mountains" style="width:190px;; height:100px;">
        <img src="img_5terre.jpg" alt="Italy" style="width:190px; height:100px;">
    </div>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:mouseoverimagetransparency.png?600|}}\\
\\
반전된 호버 효과의 예제:\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        #container {
            display: flex;
        }

        img:hover {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <h1>Image Transparency</h1>
    <p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
    <br>
    <div id="container">
        <img src="img_forest.jpg" alt="Forest" style="width: 190px; height:100px;">
        <img src="img_mountains.jpg" alt="Mountains" style="width:190px;; height:100px;">
        <img src="img_5terre.jpg" alt="Italy" style="width:190px; height:100px;">
    </div>
</body>
</html>
</HTML>
===Result====
{{:wiki:css:css_note:reversedhover.png?600|}}\\
=====Transparent Box=====
''%%opacity%%'' 속성을 사용하여 요소의 배경에 투명도를 추가하면, 모든 자식 요소가 동일한 투명도를 상속합니다.\\ 
이로 인해 완전히 투명한 요소 내부의 텍스트를 읽기가 어려울 수 있습니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: #4caf50;
            padding: 10px;
        }

        div.first {
            opacity: 0.1;
        }

        div.second {
            opacity: 0.3;
        }

        div.third {
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <h1>Transparent Box</h1>
    <p>
        When using the opacity property to add transparency to the background of an element, all of its child elements become trasnparent as well. This can make the text inside a fully transparent
        element hard to read:
    </p>
    <div class="first">
        <p>opacity 0.1</p>
    </div>
    <div class="second">
        <p>opacity 0.3</p>
    </div>
    <div class="third">
        <p>opacity 0.6</p>
    </div>
    <div>
        <p>opacity 1 (default)</p>
    </div>
</body>
</html>
</HTML>
===result===
{{:wiki:css:css_note:transparentbox.png?600|}}
=====Transparency using RGBA=====
위의 예와 같이 하위 요소에 불투명도를 적용하지 않으려면 **RGBA** 색상 값을 사용하십시오.\\ 
다음 예제에서는 텍스트가 아닌 배경색의 불투명도를 설정합니다.\\
\\
RGB 외에도 색상의 불투명도를 지정하는 알파 채널 (RGBA)과 함께 RGB 색상 값을 사용할 수 있습니다.\\
\\
RGBA 색상 값은 rgba (red, green, blue, alpha)로 지정됩니다.\\ 
알파 매개 변수는 0.0 (완전 투명)에서 1.0 (완전 불투명) 사이의 숫자입니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: rgb(76, 175, 80);
            padding: 10px;
        }
        div.first {
            background-color: rgba(76, 175, 80, 0.1);
        }
        div.second {
            background-color: rgba(76, 175, 80, 0.3);
        }
        div.third {
            background-color: rgba(76, 175, 80, 0.6);
        }
    </style>
</head>
<body>
    <h1>Transparent Box</h1>
    <p>With opacity</p>
    <div style="opacity:0.1;"><p>10% opacity</p></div>
    <div style="opacity:0.3;"><p>30% opacity</p></div>
    <div style="opacity:0.6;"><p>60% opacity</p></div>
    <div><p>opacity 1</p></div>

    <p>With RGBA color values:</p>
    <div class="first"><p>10% opacity</p></div>
    <div class="second"><p>30% opacity</p></div>
    <div class="third"><p>60% opacity</p></div>
    <div><p>default</p></div>

    <p>
        Notice how the text gets happened as well as the background color when using the opacity property.
    </p>
</body>
</html>
</HTML>
=====Text in Transparent Box=====
{{:wiki:css:css_note:transbox.png?600|}}\\
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        div.background {
            background: url(klematis.jpg);
            border: 2px solid black;
        }
        div.transbox {
            margin: 30px;
            background-color: #ffffff;
            border: 1px solid black;
            opacity: 0.6;
        }
        div.transbox p {
            margin: 5%;
            font-weight: bold;
            color: #000000;
        }
    </style>
</head>
<body>
    <div class="background">
        <div class="transbox">
            <p>This is some text that is placed in the transparent box.</p>
        </div>
    </div>
</body>
</html>
</HTML>
====예제 설명====
먼저, 배경 이미지와 테두리가 있는 %%<div>%% 요소 (class="background")를 만듭니다.\\
\\
그런 다음, 첫 번째 %%<div>%% 안에 또 다른 <div> (class = "transbox")를 만듭니다.\\
\\
%%<div class="transbox">%%에는 배경색과 테두리가 있습니다. div는 투명합니다.\\
\\
투명한 <div> 내부의 <p> 요소 안에 텍스트를 추가합니다.\\
\\






{{tag>오션 CSS Opacity, Transparency}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
