[CSS] 배경

WEB/CSS

[CSS] 배경

애플쩀 2022. 5. 20. 10:42

배경색

div는 블럭모드이기 때문에 width 설정하지 않으면 100%으로 잡힌다 . height는 안에 내용물에 따라 알아서 잡힌다.
opacity 속성으로 투명도를 설정하면 자식(하위)들도 동일한 투명도를 상속한다.

<!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">
body{
background-color:lightblue;
}
h3{
 background-color: yellow;
}
/* div는 블럭모드이기 때문에 width 설정하지 않으면 100%으로 잡힌다 . */
div{
	border: 1px solid gray;
	width:200px;
	padding:10px;
	background-color:rgba(0,255,0,0.2);
}
div.first{
/* opacity 속성으로 투명도를 설정하면 자식(하위)들도 동일한 투명도를  상속한다.  */
opacity:0.5;
}
</style>
</head>
<body>
<h3>배경과 관련된 css</h3>
배경 배경색
배경 이미지
배경 반복
배경 첨부
배경 위치 
배경 약식 속성 
 <div class="first"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sunt porro cum totam veritatis in non molestiae aspernatur quod possimus officiis quibusdam suscipit nemo ipsa fugit hic ipsum culpa consequuntur.</div>
 <div class="second">Harum sapiente doloremque mollitia possimus laudantium culpa minus eos adipisci ad maxime. Pariatur porro eaque asperiores recusandae. Aut quaerat sint nam voluptatum tenetur repellendus eaque unde est quis quia ullam.</div>
 <div class="third">Nam numquam est ea et obcaecati repellendus consequatur explicabo possimus nisi similique illum ex voluptas quis enim adipisci quae veritatis minus porro at voluptates delectus facere tempore quas eius saepe.</div>
 <div style="background-color:rgba(0,255,0,0.7)">Adipisci totam quaerat beatae eaque repellendus qui deserunt est saepe error quibusdam? Impedit minus sint assumenda vero optio doloremque enim dignissimos aspernatur voluptatibus voluptas temporibus et nobis consequuntur alias iste.</div>
 <div>Perferendis a sapiente in ipsum vitae sed atque nobis quidem! Omnis natus animi accusamus incidunt reprehenderit consequatur impedit nulla cumque fuga delectus non facere autem aperiam similique minus molestias ullam.</div>
</body>
</html>

배경이미지,반복 ,첨부, 고정 배경 약식순서:color image repeat attachment position

이미지는 전체 요소(body)를 덮도록 자동반복- 자동 가로/세로 반복
배경이미지가 있다면 ,배경색 적용이 안된다. 배경이미지를 조그맣게 하고 배경색으로 처리하기도 한다 .
텍스트 생상에 방해되지 않도록 주의한다. content 내용물이 보여야한다.

background-repeat 배경 반복

기본값은 repeat

x축, y축 양쪽 반복
background-repeat:repeat;

x축 반복
background-repeat:repeat-x;

y축 반복
background-repeat:repeat-y;

반복하지않음, 한번만
background-repeat: no-repeat;

background-attachment: scoll;

배경이 고정되어있다. 스크롤을 내려도 보인다.
background-attachment: fixed;

위치설정 - (오른쪽 위에 설정한 예제)
background-position:right top;

<!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>
body{
/* background-color: red; */
/* url쓸때 '' 있는지 확인하자  */
background-image: url('../images/img_tree.png');
/* background-repeat:repeat-x; */
/* background-repeat:repeat-x;
background-repeat:repeat-y; */

background-repeat: no-repeat;

/*첨부*/
/* background-attachment: scoll;
배경이 고정되어있다. 스크롤을 내려도 보인다.  */
background-attachment: fixed;

background-position:right top;

}
</style>
<style type="text/css">
</style>
</head>
<body>
(#top>{Top})+(h3>{css 배경이미지})+lorem+p*50>{.}
<div id="top">Top</div>
<h3>css 배경이미지</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Quidem odit eaque fugit doloribus sint dolorum id iusto assumenda dolorem numquam
 sequi impedit minus delectus ea placeat harum fuga repudiandae repellat!
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</body>
</html>

배경약식

배경 약식순서:color image repeat attachment position

예) background: white url('../images/img_tree.png') no-repeat fixed right top;

원하는 속성만 주면 된다.

background: red;
background-color: red; 둘다 가능하다

<style>
body{
/* background-image: url('../images/img_tree.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
 */
/*  배경 약식순서:color image repeat attachment position */
background: white url('../images/img_tree.png')  no-repeat  fixed right top;
/* background: red;
background-color: red; 둘다 가능  */
}
</style>

저작자표시 (새창열림)