Jam's story

[CSS] 여러 배경이미지 (다중 배경) 추가 본문

WEB/CSS

[CSS] 여러 배경이미지 (다중 배경) 추가

애플쩀 2022. 5. 25. 16:52

배경이미지 여러개 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#demo{ /*100점*/

}
div#demo{ /*101점*/
/* 여러개의 배경 이미지를 설정- 콤마(.) 나열  */


/* background-image:url('../images/img_flwr.gif'), url('../images/paper/gif');
background-repeat: no-repeat;
background-position: right bottom, left top;  */
background: url('../images/img_flwr.gif') no-repeat right bottom,
url('../images/img_flwr.gif') no-repeat left top;
/* background: url('../images/img_flwr.gif') no-repeat right bottom; */
}
</style>
</head>
<body>
<h3>[CSS] 여러 배경이미지 (다중 배경) 추가 </h3>
<pre>
1.background-size 
2.background-origin
</pre>
<!-- #demo>h1>lorem3^p*2>lorem -->
<div id="demo">
	<h1>Lorem ipsum dolor.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sint consequatur nihil atque. Distinctio cum incidunt vero assumenda nobis quibusdam quia nisi quidem iste architecto cumque rem magnam asperiores repellat!</p>
	<p>Esse et eum nihil cupiditate soluta ullam eaque illum omnis perspiciatis eos ducimus officia ab aut quaerat iusto modi placeat veniam nemo maiores pariatur! Molestiae corrupti quidem numquam laboriosam tenetur.</p>
</div>
</body>
</html>

배경이미지 줄이기 

#demo1{
background-size: 100px 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
border:1px solid black;
padding:15px;
background: url("../images/img_flwr.gif") no-repeat;
}
#demo1{
background-size: 100px 80px;
}
</style>
</head>
<body>
<h3>ex12_02.html-background-size</h3>
<pre>
- 배경 이미지의 크기를 지정하는 속성
-크기 단위: 길이, % 지정

</pre>
<div id="demo1">
	<h1>Lorem ipsum dolor.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ex repellat praesentium ullam dolorum quod labore soluta fugiat aliquam esse sed ducimus veniam in laborum non dicta nemo laboriosam assumenda!</p>
	<p>Tempora error veniam doloribus itaque corporis in ab tempore esse fugiat facere nisi quidem odio laudantium laborum nesciunt? Consectetur alias animi excepturi porro dicta natus distinctio maiores suscipit minima obcaecati.</p>
</div>
<div id="demo2">
	<h1>Deserunt totam et.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet laborum tenetur assumenda iste porro illo maxime expedita aliquid incidunt ullam eos officiis cupiditate adipisci voluptatibus eius quisquam repellendus. Esse fugit.</p>
	<p>Fuga accusamus sapiente veritatis minima et odio numquam neque unde magni facere facilis harum dolorum necessitatibus dicta nemo nam dignissimos voluptatem similique ducimus rerum ullam distinctio iste quas ipsam in.</p>
</div>
</body>
</html>

 

contain  cover 속성값 의미파악 

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 배경이미지사이즈 -contain, cover, origin, clip,parallex  (0) 2022.05.26
[CSS] 사원이미지 출력  (0) 2022.05.26
[CSS] border-radius  (0) 2022.05.25
[CSS] 아이콘에 스타일+ 막대그래프 +사원 이미지  (0) 2022.05.25
[CSS] 특수성(특이성)  (0) 2022.05.25
'WEB/CSS' Related Articles more
Comments