設定圖片樣式和背景
設定圖片樣式和背景
圖片是網頁中不可缺少的內容，它能使頁面更加豐富多彩，能讓人更直觀地感受到網頁所要傳達給瀏覽者的資訊。下面將詳細介紹CSS設定圖片風格樣式的方法，包括圖片的邊框和圖片的縮放等等。
在HTML中，大家都知道，圖片即img元素，作為HTML的一個獨立物件，需要佔據一定的空間。因此，img元素在頁面中的風格樣式仍然用盒模型來設計.
圖片樣式設計
1.設定圖片邊框
在HTML中可以直接通過<img>標記的border屬性值為圖片新增邊框，屬性值為邊框的粗細，以畫素為單位，從而控制邊框的粗細。當設定border屬性值為0時，則顯示沒有邊框。
例如：
<img src="001.jpg" border="0"> <!--顯示為沒有邊框--> <img src="001.jpg" border="1"> <--顯示邊框的粗細為 1px--> <img src="001.jpg" border="2"> <--顯示邊框的粗細為 2px--> <img src="001.jpg" border="3"> <--顯示邊框的粗細為 3px--> <img src="001.jpg" border="4"> <--顯示邊框的粗細為 4px-->
通過瀏覽器的解析，圖片的邊框粗細從左至右依次遞增，效果如下：
通過瀏覽器的解析，圖片的邊框粗細依次遞增，效果如上。
然而使用這種方法有很大的限制，即所有的邊框都只能是黑色，而且風格十分單一，都是實線，只是在外邊框粗細上能夠進行調整。
如果希望改變邊框的顏色，或者換成虛線邊框，僅僅依靠HTML是不夠的，是無法實現的。下面將會講到如何使用CSS樣式美化圖片的邊框。
例如：
<html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .demo1{ border-style:dotted; /*點畫線邊框*/ border-color: #996600; /*邊框顏色為金黃色*/ border-width: 4px; /*邊框粗細為4px*/ margin:2px; } .demo2{ border-style:dashed; /*虛線邊框*/ border-color: blue; /*邊框顏色為藍色*/ border-width: 2px; /*邊框粗細為2px*/ margin:2px; } .demo3{ border-style:solid dotted dashed double; /*4邊的線型依次為實線，點畫線，虛線和雙線邊框*/ border-color:red green blue purple; /*4邊的顏色依次為紅色，綠色，藍色和紫色*/ border-width: 1px 2px 3px 4px; /*4邊的邊框粗細依次為1px 2px 3px 4px*/ margin:2px; } </style> </head> <body> <img src="21.jpg" class="demo1"> <img src="21.jpg" class="demo2"> <img src="21.jpg" class="demo3"> </body> </html>
效果如下：
如果希望分別設定4條邊框的不同樣式，在CSS中也是可以實現的，只需要分別設定 border-left、border-right、border-top、border-bottom的樣式即可，依次對應於左、右、上、下4條邊框。
2.設定圖片縮放
使用CSS樣式控制圖片的大小，可以通過width 和height兩個屬性來實現。需要注意的是，當width和height兩個屬性的取值使用百分比數值時，它是相對於父元素而言的。如果將這兩個屬性設定為相對body的寬度或高度，就可以實現當瀏覽器視窗改變時，圖片大小也發生相應變化的效果。
設定圖片的縮放如下：
<html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .demo1{ width:30%; height:40%; } .demo2{ width:150px; height:150px; } </style> </head> <body> <div > <img src="21.jpg" > <img src="21.jpg" class="demo1"> <img src="21.jpg" class="demo2"> </div> </body> </html>
效果如下：
說明：
在demo1中定義width和height兩個屬性的取值為百分比數值，該數值是相對與div容器而言的，而不是相對於圖片本身。
demo2中定義width和height 兩個屬性的取值為絕對畫素值，圖片將按照定義的畫素值顯示大小。
圖片背景設計
1.設定背景顏色
在HTML中，可以使用標籤bgcolor屬性設定網頁的背景顏色。而在CSS裡，不僅可以用background-color屬性來設定網頁背景顏色，還可以設定文字背景顏色。
語法：backround-color:color|transparent
引數：color指定顏色，transparent表示透明的意思，也是瀏覽器的預設值。
設定背景顏色如下：
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #087;
}
h1{
font-family: 黑體；
background-color:orange;
}
}
</style>
</head>
<body>
<h1>
標題
</h1>
<p>
這裡是文字內容
</p>
</body>
</html>
效果如下：
2.設定背景影象
CSS除了可以設定背景的顏色，還可以用background-image來設定背景圖片。
語法：background-image:url(url)|none
引數：url表示要插入背景圖片的路徑。none表示不載入圖片。
說明：設定物件的背景圖片。若把影象新增到整個瀏覽器視窗，可以將其新增到<body>標籤中。
設定背景圖片如下：
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: no-repeat;
}
}
</style>
</head>
<body>
</body>
</html>
效果如下：
需要說明的是，如果網頁中某元素同時具有background-image屬性和background-color屬性，那麼background-image屬性優先於background-color屬性，也就是說背景圖片永遠覆蓋在背景色之上。
3.設定背景重複
當背景圖片的大小小於元素區域時，可以使用background-repeat屬性設定是否及如何重複背景圖片。
在預設情況下，影象會自動向水平和豎直兩個方向平鋪。如果不希望平鋪，或者只希望沿著一個方向平鋪，可以使用background-repeat屬性來控制。
語法：background-repeat:repeat | no repeat | repeat-x | repeat-y
引數：repeat表示背景影象在水平和豎直方向平鋪;no-repeat表示背景影象不平鋪。
說明：設定物件的背景影象是否平鋪及如何平鋪。必須先指定物件的背景圖片。
設定背景重複，如下：
（1）背景不重複
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: no-repeat；
}
</style>
</head>
<body>
</body>
</html>
（2）背景重複
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
（3）背景水平重複
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
（4）背景豎直重複
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
