顏色與背景CSS樣式

顏色與背景的屬性 color 文字顏色 background-color 設定元素之背景顏色 background-image 背景影像 background-repeat 背景影像重複方式 background-position 背景影像位置 background-attachment 固定背景影像位置 background 設定背景影像之所有屬性

文字顏色(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>

背景顏色(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>

背景影像(background-image) body {background-image: url(bg1.jpg); …} bg1.jpg

背景影像重複方式(background-repeat) h2 { background-image: url(h-bg.jpg); background-repeat: repeat-y; … } h-bg.jpg

background-image: url(v-bg.jpg); background-repeat: repeat-x;" … } div { background-image: url(v-bg.jpg); background-repeat: repeat-x;" … } v-bg.jpg

body {background-image: url(sunFlower.jpg); background-repeat: no-repeat; … }

背景影像位置(background-position) left center right top center bottom

body {background-image: url(sunFlower.jpg); background-repeat: no-repeat; background-position: top right; … }

body {background-image: url(sunFlower.jpg); background-repeat: no-repeat; background-position: 100px 50px; … } 100px 50px

固定背景影像位置(background-attachment) body { background-image: url(sunFlower.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } fixed | scroll

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 http://ycchen.im.ncnu.edu.tw/www2011/lab/mbg.zip

background … {background: background-color background-image background-repeat background-attachment background-position;} body {background: url(flower.jpg) no-repeat fixed center;}

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));

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%);

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

不透明度 opacity

http://ycchen.im.ncnu.edu.tw/www2011/lab/opacity.zip