목차
background 예제 - 배경색・배경이미지 동시 사용 background 정의 background 구문 background 예제 - 배경이미지 요소에 꽉차게 background 예제 - 자식요소 클릭 시, 부모요소 배경색 변경 background 예제 - 배경이미지 이미지 위에 텍스트 넣기 background 예제 - 배경이미지에 색상 필터 효과 주기
background 예제 - 배경색・배경이미지 동시 사용
<style>
body {background: red url("http://i.imgur.com/N0haYzT.gif") no-repeat right top fixed;}
p {color:white; font-weight:bold; font-size:30px; text-align:center;}
</style>
<body>
<p>홈짱닷컴 (homzzang.com) </p>
</body>
PS. 배경색만 지정.
<style>
p {background: red}
</style>
<p>홈짱닷컴 (homzzang.com) </p>
고급 응용 : https://codepen.io/sinbi/pen/xoPbLQ
background 정의
배경 관련 속성을 한번에 정의.
※ 필요한 배경 속성만 선별 사용 가능.
기본값:
상속여부 : X
애니효과 : O
CSS버전 : CSS1 + CSS3
JS구문 : object .style.background ="red url(hz.gif) top left no-repeat"
2.
모든 브라우저 지원 .
단 일부 CSS3 속성값 경우 IE9 이상 .
3.
※ background-color 속성과 background-image 속성은 동시 사용 가능.
※ background-image 와 같이 사용하는 속성.
4.
한번에 여러 속성값 사용 가능 O
background 구문
※ 내용 전달 편의 위해, 속성값에 background 대신 bg 사용.
selector {background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;}
[참고]
1.
속성값에 bg-size 속성 사용 경우/ /
30px 40px : background-size (크기: 너비 30 픽셀, 높이 40 픽셀)
2.
여러 배경이미지와 배경색을 함게 사용 시, 배경색이 마지막에 와야 함.
[속성값]
배경 색깔 (기본값 transparent, 상속 X). CSS1
배경이미지 크기. (기본값 auto, 상속 X). CSS3
배경 출력 영역 정의 (기본값 border-box, 상속 X). CSS3
initial
이 속성의 기본값으로 설정. CSS3
inherit
부모요소의 속성값 상속. CSS2
background 예제 - 배경이미지 요소에 꽉차게
[방법1]
<div style="background:url('이미지 주소'); background-size:100% 100% ;"></div>
[방법2]
<div style="background:url('이미지 주소'); background-size:cover ;"></div>
background 예제 - 자식요소 클릭 시, 부모요소 배경색 변경
[방법1] - 자식요소의 box-shadow 이용 방법
<style>
div {
overflow: hidden;
background-color: blue ;
padding:20px;
text-align:center;
}
div * {
position: relative;
z-index: 10;
}
div input[type=text]:focus {
background-color: yellow ;
box-shadow: 0 0 10000px 10000px red;
z-index: 5;
}
<div>
<input type="text" />
<input type="text" />
</div>
결과보기
https://stackoverflow.com/questions/18336435
[방법2] - 부모요소 역할하는 더미 자식요소 추가. z-index 설정 중요.
<style>
.nav {position:relative;}
.nav .menu {background:black; padding:50px;}
.nav .menu ul:after {content:''; display:block; clear:both;}
.nav .menu .menu_li {float:left; width:200px; height:50px; line-height: 50px; text-align:center;}
.nav .menu .menu_li a {position:relative; z-index:3; color:white;}
.nav .menu .menu_li .bg {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; border:5px solid red;}
.nav .menu .menu_li a:hover {background:red; display:block; cursor:pointer;}
.nav .menu .menu_li:hover .bg {display:block; background:blue;}
</style>
<div class="nav">
<div class="menu">
<ul>
<li class="menu_li">
<a>메뉴1</a>
<div class="bg"></div>
</li>
<li class="menu_li">
<a>메뉴2</a>
<div class="bg"></div>
</li>
<li class="menu_li">
<a>메뉴3</a>
<div class="bg"></div>
</li>
</ul>
</div>
</div>
결과보기
DSLOVE 님 (2020.04.03) https://sir.kr/qa/352957
background 예제 - 배경이미지 이미지 위에 텍스트 넣기
<style>
#box {background:red url('box.jpg'); overflow:hidden; padding:30px;}
#box .a {background:blue url('a.jpg') no-repeat center top; clear:both;}
#box .b {background:green url('b.jpg') no-repeat left top; float:left; width:50%}
#box .c {background:tomato url('c.jpg') no-repeat right top; float:right; width:50%}
</style>
<div id='box' class=''>
</div>
결과보기
ps. 배경이미지가 존재 않는 경우 대비해, 배경색도 함께 기재.
관련글 (200619) https://sir.kr/qa/364736
background 예제 - 배경이미지에 색상 필터 효과 주기
<style>
div {
width:185px;
height:39px;
position: relative;
}
.a {
background-color: red;
opacity : 0.5;
z-index : 2;
position : absolute;
}
.b {
background-image: url('https://i.imgur.com/WfW5mBC.png');
z-index: 1;
position: absolute;
}
</style>
<div>
<div class="a"></div>
<div class="b"></div>
</div>
<div class="b"></div>
결과보기
