배경을 반투명하게 하면 내부 요소로 같이 반투명하게 된다.
하위 영역도 같이 적용이 되기 때문에 배경을 뒤로 처리해서 사용한다.
content는 빈 내용으로 넣는다. 꼭 넣어주어야 한다!
!important 꼭 적용하기
<!DOCTYPE html>
<html lang="ko">
<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>배경만 반투명하게 </title>
<style>
div {
width: 500px;
height: 300px;
position: relative;
z-index: 1;
}
div::after {
background-image: url("images/portrait-g346a6e0b4_1920.jpg");
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7!important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
</style>
</head>
<body>
<div>
<h2>제목입니다.</h2>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</body>
</html>'공부기록 > 실습' 카테고리의 다른 글
| 영역별로 레이아웃 만들기(이미지 포함) (0) | 2023.02.28 |
|---|---|
| 과제 영역별 레이아웃 똑같이 만들기 (0) | 2023.02.28 |
| 드롭 다운 메뉴 만들기 (0) | 2023.02.27 |
| 테이블 스타일링 (0) | 2023.02.27 |
| 이미지 슬라이더 만들기 적용 순서(상세 이미지) (0) | 2023.02.27 |
