顏色與背景 css 樣式
DESCRIPTION
顏色與背景 CSS 樣式. 顏色與背景的屬性. color 文字顏色 background-color 設定元素之背景顏色 background-image 背景影像 background-repeat 背景影像重複方式 background-position 背景影像位置 background-attachment 固定背景影像位置 background 設定背景影像之所有屬性. 文字顏色 (color). 文字的顏色是紅色 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/1.jpg)
顏色與背景 CSS 樣式
![Page 2: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/2.jpg)
顏色與背景的屬性color 文字顏色background-color 設定元素之背景顏色background-image 背景影像background-repeat 背景影像重複方式background-position 背景影像位置background-attachment 固定背景影像位置background 設定背景影像之所有屬性
![Page 3: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/3.jpg)
文字顏色 (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>
![Page 4: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/4.jpg)
背景顏色 (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>
![Page 5: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/5.jpg)
背景影像 (background-image)
bg1.jpg
body {background-image: url(bg1.jpg);…}
![Page 6: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/6.jpg)
背景影像重複方式 (background-repeat)h2 {
background-image: url(h-bg.jpg); background-repeat: repeat-y; … }
h-bg.jpg
![Page 7: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/7.jpg)
div {background-image: url(v-bg.jpg); background-repeat: repeat-x;" … }
v-bg.jpg
![Page 8: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/8.jpg)
body {background-image: url(sunFlower.jpg); background-repeat: no-repeat;… }
![Page 9: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/9.jpg)
背景影像位置 (background-position)
top
center
bottom
left center right
![Page 10: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/10.jpg)
body {background-image: url(sunFlower.jpg); background-repeat: no-repeat;background-position: top right;… }
![Page 11: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/11.jpg)
body {background-image: url(sunFlower.jpg); background-repeat: no-repeat;background-position: 100px 50px;… }
100px
50px
![Page 12: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/12.jpg)
固定背景影像位置 (background-attachment) body {
background-image: url(sunFlower.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed;
}
fixed | scroll
![Page 13: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/13.jpg)
Multiple Backgroundstbg.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
![Page 14: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/14.jpg)
background
… {background: background-color background-image background-repeat background-attachment background-position;}
body {background: url(flower.jpg) no-repeat fixed center;}
![Page 15: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/15.jpg)
不透明度 opacity
![Page 16: 顏色與背景 CSS 樣式](https://reader035.vdocuments.net/reader035/viewer/2022082205/568135ce550346895d9d3422/html5/thumbnails/16.jpg)
http://ycchen.im.ncnu.edu.tw/www2011/lab/opacity.zip