CSS3 에서는 마스크기능도 지원한다.
mask속성에 대해 알아보자.
-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-box-image
-webkit-mask-clip (background-clip)
-webkit-mask-composite
-webkit-mask-image (background-image)
-webkit-mask-origin (background-origin)
-webkit-mask-position (background-position)
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat (background-repeat)
-webkit-mask-size (background-size)
이런 속성들이 있다.
상황에 맞게 쓰면 된다.
코드예제 :
<!DOCTYPE html>
<html>
<head>
<title>CSS 3 Test: Mask set using mask-image</title>
<meta name="Author" content="jhryu99">
<meta name="Date" content="2011-06-17">
<meta name="assert" content="The 'mask-image' property properly accepts.">
</head>
<style type="text/css">
.mask-box {
-webkit-mask-image: url(../resources/mask.png);
}
</style>
<body>
<p>Test passes if there is a cloudy masked picture, with multiple circles, below.</p>
<img src="../resources/hongkong.jpg" class="mask-box">
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS3 animation 끝에 정지 (0) | 2013.11.21 |
|---|---|
| min-width 와 max-width 의 사용 (0) | 2013.07.12 |
| CSS 커서 속성 모음 (0) | 2013.05.31 |
| web font (0) | 2013.05.14 |
| CSS3 을 IE6,7,8 에서 인식하게 하는 방법 (0) | 2013.05.10 |