초보개발자의 성장블로그
CSS 36 opacity로 불투명도 속성을 주기
프론트엔드/CSS2021. 4. 4. 15:26
opacity 속성을 주면, 투명도를 조절 할수 있다.
마우스를 올리면 선명하게 보입니다.
<!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>'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 38 gradient효과 (0) | 2021.04.04 |
|---|---|
| CSS 37 visibility 속성과 display 속성 (4) | 2021.04.04 |
| CSS 35 회원가입 폼 만들기 (2) | 2021.04.04 |
| CSS 34 로그인 폼 만들기 (0) | 2021.04.04 |
| CSS 33 table 꾸미기 (2) | 2021.04.04 |
댓글()