設定圖片樣式和背景
設定圖片樣式和背景
圖片是網頁中不可缺少的內容,它能使頁面更加豐富多彩,能讓人更直觀地感受到網頁所要傳達給瀏覽者的資訊。下面將詳細介紹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>