Download presentation
Presentation is loading. Please wait.
1
顏色與背景CSS樣式
2
顏色與背景的屬性 color 文字顏色 background-color 設定元素之背景顏色 background-image 背景影像 background-repeat 背景影像重複方式 background-position 背景影像位置 background-attachment 固定背景影像位置 background 設定背景影像之所有屬性
3
文字顏色(color) <p style="color: red;">文字的顏色是紅色</p> <p style="color: #00FF00;">文字的顏色是綠色</p> <p style="color: #00F;">文字的顏色是藍色</p> <p style="color: rgb(255,0,0);">文字的顏色是紅色</p> <p style="color: rgb(0%,100%,0%);">文字的顏色是綠色</p>
4
背景顏色(background-color)
<p style="background-color: aqua;">背景顏色是碧綠色</p> <p style="background-color: #C0C0C0;">背景顏色是銀灰色</p> <p style="background-color: #FF0;">背景顏色是黃色</p> <p style="background-color: rgb(0,255,255);">背景顏色是碧綠色</p> <p style="background-color: rgb(75%,75%,75%);">背景顏色是銀灰色</p>
5
背景影像(background-image)
body {background-image: url(bg1.jpg); …} bg1.jpg
6
背景影像重複方式(background-repeat)
h2 { background-image: url(h-bg.jpg); background-repeat: repeat-y; … } h-bg.jpg
7
background-image: url(v-bg.jpg); background-repeat: repeat-x;" … }
div { background-image: url(v-bg.jpg); background-repeat: repeat-x;" … } v-bg.jpg
8
body {background-image: url(sunFlower.jpg);
background-repeat: no-repeat; … }
9
背景影像位置(background-position)
left center right top center bottom
10
body {background-image: url(sunFlower.jpg);
background-repeat: no-repeat; background-position: top right; … }
11
body {background-image: url(sunFlower.jpg);
background-repeat: no-repeat; background-position: 100px 50px; … } 100px 50px
12
固定背景影像位置(background-attachment)
body { background-image: url(sunFlower.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } fixed | scroll
13
Multiple Backgrounds tbg.png bg.png bbg.png #intro { padding: 35px;
width: 595px; background-image: url(tbg.png), url(bbg.png), url(bg.png); background-position: top left, bottom left, top left; background-repeat: no-repeat, no-repeat, repeat-y ; } Note: Width of background image: 665px width = (665 – 35*2) px
14
background … {background: background-color background-image background-repeat background-attachment background-position;} body {background: url(flower.jpg) no-repeat fixed center;}
15
CSS3 Gradients http://www.w3schools.com/css/css3_gradients.asp
Two types of gradients: Linear Gradients (goes down / up / left / right / diagonally) Radial Gradients (defined by their center) background: linear-gradient(direction, color1, color2, ...); direction: to top, to bottom, to right, to left, to bottom right, to top left 0deg, 180deg, 90deg, -90deg, 135deg, -45deg, Ex. background: linear-gradient(to right, orange, yellow, green); background: linear-gradient(to top left, black, green, #3f3); background: linear-gradient(black, #66f); background: linear-gradient(135deg, cyan, purple); background: linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,1));
16
CSS3 Gradients Repeating a linear-gradient Radial Gradient
Repeating a radial-gradient background: repeating-linear-gradient(red, yellow 10%, green 20%); background: radial-gradient(red, yellow, green); background: radial-gradient(circle, red, yellow, green); repeating-radial-gradient(red, yellow 10%, green 15%);
17
Transparency + Background Image
#banner { background: linear-gradient(to right, rgba(16,64,0,1), rgba(16,64,0,1) 65%, rgba(0,0,0,0)), url(ncnu.png); background-repeat: no-repeat; background-color:darkOliveGreen; background-position: right center; … } <div id="banner"> </div> ncnu.png
18
不透明度 opacity
Similar presentations
