WEB.CSS
chapter06 : background
GAWON
2023. 5. 18. 09:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
1.아래 div들 크기 변경(500px , 500px)
너비 - width
높이 - height
1-1 div들 외각선 적용
border:1px solid black;
2.박스 1,2,3에 배경 이미지 적용 - hot.jpg
- /
div{
width:500px;
height:500px;
border:1px solid black;
}
#box1{
/*이미의 크기 = 박스 크기*/
background-image: url("images/hot.jpg");
background-size: 500px 500px;
opacity: 0.5; /*투명도 : 값이 낮을수록 투명함 (0~1)*/
}
#box2{
/*이미지 크기 > 박스 크기*/
background-image: url("images/hot.jpg");
background-size: cover;
}
#box3{
/*이미지 크기 < 박스 크기*/
background-image: url("images/hot.jpg");
background-size: contain;
}
#box4{
/* 한 박스에 여러 이미지 넣기 */
background-image: url(images/firefox.png),
url(images/logo.png),
linear-gradient(to right, rgba(30, 75, 115, 1),
rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, top;
}
</style>
</head>
<body>
<div id="box1">박스1</div><br>
<div id="box2">박스2</div><br>
<div id="box3">박스3</div><br>
<div id="box4">박스4</div>
</body>
</html>