CSS 속성 중 linear-gradient()를 사용하면 그라데이션을 줄 수 있다.
linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.
developer.mozilla.org
<!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>
<link rel="stylesheet" href="gradient.css" />
</head>
<body>
<section>
<h1>See what's next</h1>
</section>
</body>
</html>body {
margin: 0;
height: 2000px;
background-color: black;
}
section {
height: 100vh;
background-image: url("https://assets.nflxext.com/ffe/siteui/vlv3/9737377e-a430-4d13-ad6c-874c54837c49/945eec79-6856-4d95-b4c6-83ff5292f33d/KR-ko-20220111-popsignuptwoweeks-perspective_alpha_website_large.jpg");
}
section::before {
content: "";
background: linear-gradient(to top, black, transparent);
/* to 어느쪽에서 시작 할 건지, 어떤 색으로 끝날 건지, 투명도를 좀 줘라 */
position: absolute;
left: 0;
height: 100%;
width: 100%;
}
h1 {
color: white;
font-size: 6em;
position: absolute;
top: 200px;
left: 100px;
}
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 상속 (0) | 2022.01.26 |
|---|---|
| [생활코딩] 타이포그래피 - 웹폰트 (0) | 2022.01.25 |
| [생활코딩] 타이포그래피 - font (0) | 2022.01.24 |
| [생활코딩] 타이포그래피 - text-align (0) | 2022.01.24 |
| [생활코딩] 타이포그래피 - color (0) | 2022.01.24 |
댓글