[CSS] 배경 색 어둡게 만들기
배경 색깔을 더 어둡게 설정을 해주고 싶을 때 꿀팁🍯!
"가상의 div를 만들어준다."
HOW?
예를 들어
header의 배경이미지를 어둡게 하고 싶다고 가정했을 때,
header::after{
content :'';
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : rgba(0,0,0,0.4);}
header * {
z-index : 1;}
::after을 이용해 가상의 div를 만들어준 후,
position을 absolute로 설정하고 너비와 높이를 100%로 설정을 해주면 header 전체를 차지하는 div가 된다. 이 때 rgba를 이용하여 투명도를 낮추어주면 어두운 배경색을 그려낼 수 있다!
참고로 글씨까지 어두워지기 때문에 header * 부분을 따로 z-index 설정 해주는 것 잊지 말 것!
🍯 또다른 예시) body background image 어둡게 만들기
/* Add a dark overlay */
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
body * {
z-index: 1;
}
Author And Source
이 문제에 관하여([CSS] 배경 색 어둡게 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoje15v/CSS-배경-색-어둡게-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)