CSS 배경이미지만 어둡게 하는 방법좀 알려주세요
본문
지금 배경을 어둡게 했는데 글씨들까지 다 어둡게 되어 버려서 배경만 어둡게 햇으면 좋겠습니다.
어떻게 하는지 좀 알려주세요. 초보한테는 너무 힘드네요
<div style="background-color:#000;filter: brightness(50%);">
<header style="background:url(<?php echo $back_image; ?>) no-repeat;height:302px;text-align:left;padding-top:120px;" class="lpad">
<div style="font-family:Nanum Gothic;font-weight:bold;"><span style="background-color:#fae100;padding:3px 10px;color:#000;"><?php echo $view['wr_7']; // 분류 출력 끝 ?></span> <span style="color:#fff;">조회수 : <?php echo number_format($view['wr_hit']) ?>회</span></div>
<div style="font-size:18px;margin-top:8px;color:#fff;"> <?php echo cut_str(get_text($view['wr_subject']), 70); // 글제목 출력 ?></div>
<span style="font-family:Nanum Gothic;color:#fae100"><?php echo get_text($view['wr_2']); // 글제목 출력 ?></span>
</header>
</div>
답변 3
스타일
.bg { psition:relative; }
.bg:after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.5); display:block; z-index:1; }
.info { position:absolute; z-index:2; } // 위치는 top, left, transform등으로 조정하세요.
코드는
<div>
<div class="bg">
<div class="info">배경위 내용</div>
</div>
<div>하단내용</div>
</div>
위 방식으로 작업해보세요.
background:rgba(0,0,0,0.5);
rgb로 색설정후 0.0~1로 투명도 설정하세요~
background:rgba(0,0,0,0.5);
rgb로 색설정후 0.0~1로 투명도 설정하세요~