반응형
CSS 배경 color 및 image 기울이기
요즘 홈페이지 제작하면서 슬라이스 백그라운드가 많이 나오는데 지금 구현하려고 하는 페이지는 일반적인 HTML 및 CSS로 슬라이스 된 배경을 나타내는 방법을 보여주는 간단한 예입니다. 간단하게 만들어 보았으니 참고하시기 바랍니다.
html 구조
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<body>
<div class="skewed-bg">
<div class="content">
<h1 class="title">Background with CSS</h1>
<p class="text">HTML & CSS.</p>
</div>
</div>
<footer class="footer">
<div class="content">
<h1 class="title">Background with CSS</h1>
<p class="text">HTML & CSS.</p>
</div>
</footer>
</body>
|
컬러를 백그라운드에 적용하여 슬라이형태로 만든 기본 CSS정의
|
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
html, body { height: 100%;}
body {
background: #a67c52;/*** 상단 background 컬러 ***/
color: #FFF;}
.skewed-bg {
background: #603913; /*** 하단 background 컬러 ***/
padding: 200px 0;
-webkit-transform: skew(0deg, -10deg);
-moz-transform: skew(0deg, -10deg);
-ms-transform: skew(0deg, -10deg);
-o-transform: skew(0deg, -10deg);
transform: skew(0deg, -10deg);
margin-top: -200px; /*** 상단 background 여백높이 ***/}
.skewed-bg .content {
-webkit-transform: skew(0deg, 10deg);
-moz-transform: skew(0deg, 10deg);
-ms-transform: skew(0deg, 10deg);
-o-transform: skew(0deg, 10deg);
transform: skew(0deg, 10deg);
text-align: center;}
.skewed-bg .content .title {
padding-top: 100px;
font-weight: normal; }
.skewed-bg .content .text {
width: 60%;
margin: 25px auto;
color: #ff7d00; }
.footer {
padding-top: 300px;
margin-top: -200px; /*** 하단 background 여백높이 ***/}
.footer .credits {
text-align: center;
color: #666;}
.footer .credits .link {
color: #00B285;
text-decoration: none;}
.footer .content {
width: 80%;
margin: 0 auto;
text-align: center;}
.footer .content .text {
width: 100%;
margin: 15 auto;
color: #603913;
text-align: center;}
|
상단의 정의중에 슬라이스 된 background color를 응용하여 이미지로 전환하려면 background-image를 활용하여 정의하면 이미지로 만들수 있습니다. 간단하게 정의하자면 아래와 같습니다.
|
1
2
3
4
5
|
body { background: #a67c52;} /* 컬러형식 */
body { background-image:url(이미지 네임.jpg);} /* 이미지형식 */
.skewed-bg { background: #002157;} /* 컬러형식 */
.skewed-bg { background-image:url(이미지 네임.jpg);} /* 이미지형식 */
|
백그라운드 컬러형태
백그라운드 이미지형태
기울기를 조절하는 CSS정의 입니다. 기울기 비율을 조절할땐 아래의 정으를 컨트롤 하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.skewed-bg {
-webkit-transform: skew(0deg, -10deg);
-moz-transform: skew(0deg, -10deg);
-ms-transform: skew(0deg, -10deg);
-o-transform: skew(0deg, -10deg);
transform: skew(0deg, -10deg);}
.skewed-bg .content {
-webkit-transform: skew(0deg, 10deg);
-moz-transform: skew(0deg, 10deg);
-ms-transform: skew(0deg, 10deg);
-o-transform: skew(0deg, 10deg);
transform: skew(0deg, 10deg);}
|
반응형
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| style css의 하이퍼 링크 활용하기 (3) | 2022.06.17 |
|---|---|
| css 그라데이션 표현과 응용 css background (2) | 2017.11.23 |
| html icon 아이콘 적용하기 (0) | 2017.11.01 |
| html 주석(comment) (0) | 2017.10.11 |
| CSS 글꼴 Font 속성 (0) | 2017.09.27 |
