html 이미지 배경 투명하게 만들기

배경에 투명도를 주는 방법은 크게 두가지 입니다.

background 속성에 css를 이용한 rgba와 엘러먼트에 투명도를 주는 opacity 속성이 있습니다.

두가지의 가장 큰 차이는 속성 background만 투명도를 적용하는 방식과 엘리먼트(element) 전체에 투명도를 주는 방식입니다.

rgba 예) 배경색을 투명하게 만들기

div {background-color: rgba(255,255,255,0.75);}

255, 255, 255는 8비트(256) 색상값 0~255까지와 0.75는 투명도 75%를 의미 합니다.

투명도는 0~1.0까지 존재 합니다.

opacity 예) 이미지 요소에 50%의 투명도 주는 방법

p img {opacity: 0.5;}

예) p태그 안에 배경 이미지를 넣고 투명하게 만들때

p {background: url('image/myImg.jpg') no-repeat; opacity : 0.5;}

만약 배경색이 아닌 배경 이미지에 투명도를 적용해야 되는 경우는 opcity를 이용합니다.

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>CSS</title>
 <style type="text/css">
 div {
        width: 500px; height: 300px; padding:50px 0; 
        background: url('./image/myImg.jpg') no-repeat;
 }
div h1 {
        background-color: rgba(0,0,0,0.8); color: #fff; 
        padding:100px 0;  text-align: center;
 }
</style>
 </head>
 <body>
	<div>
		<h1>CSS 배경 투명도</h1>
	</div>
 </body>
</html>

저작자표시

'[IT] HTML & CSS' 카테고리의 다른 글

html 특수 문자 코드 표 (0)	2019.12.29
html img 이미지 가져오기 절대경로와 상대경로 (3)	2019.12.29
HTML 기초 tag 많이 사용되는 태그 정리 (0)	2019.12.28
CSS란 무엇인가? HTML 기초 (0)	2019.12.28
HTML이란 무엇인가요? (0)	2019.12.28