배경 색깔을 더 어둡게 설정을 해주고 싶을 때 꿀팁🍯!

"가상의 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;
}