프론트엔드/CSS

CSS 36 opacity로 불투명도 속성을 주기

스펀지연구소 2021. 4. 4. 15:26

opacity 속성을 주면, 투명도를 조절 할수 있다.

Document

마우스를 올리면 선명하게 보입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
  a[text="a1"]:link{ 
    opacity: 0.5; 
    }
  a[text="a1"]:hover{
     opacity: 1.0;
      }
  img[text="b1"]{ 
    opacity: 0.2; 
    }
  img[text="b1"]:hover{ 
    opacity: 1.0;
     }
  </style>
</head>
<body>
  <h3>마우스를 올리면 선명하게 보입니다.</h3>
  <div>
    <a text="a1" href="http://www.google.com">구글웹사이트</a>
  </div>
  <p></p>
  <div>
    <img text="b1" width="300px" 
    src="http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg">
  </div>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)