圖片樣式
圖片大小
最基本的應(yīng)該就是對大小的管理
width:像素值; 寬度
height:像素值; 高度
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<img src="小貓.jpg">
</body>
</html>
圖片邊框
一樣使用border進(jìn)行定義
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 300px;
height: 300px;
border: 5px blue solid;
}
</style>
</head>
<body>
<img src="小貓.jpg">
</body>
</html>
效果：
圖片對齊
圖片對齊和文本的對齊是一樣的，也是用 text-align進(jìn)行，但需要注意不能直接在 img定義，需要在父元素處定義
屬性依然是：
left 左對齊
center 居中
right 右對齊
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
/*放在這里是不生效的*/
text-align: right;
}
/*需要單獨(dú)定義，在父元素中才能生效*/
.myimg {text-align: center;}
</style>
</head>
<body>
<div class="myimg">
<img src="小貓.jpg">
</div>
<img src="小貓.jpg">
</body>
</html>
效果：
垂直對齊
用法：vertical-align:取值;
屬性：
top 頂部對齊
middle 中部對齊
baseline 基線對齊
bottom 底部對齊
例子：
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
}
#a{vertical-align: top;}
#b{vertical-align: middle;}
#c{vertical-align: bottom;}
#d{vertical-align: baseline;}
</style>
</head>
<body>
<img id="a" src="小貓.jpg">
<img id="b" src="小貓.jpg">
<img id="c" src="小貓.jpg">
<img id="d" src="小貓.jpg">
</body>
</html>
效果：
emm~~~貌似看起來就是這樣，暫時想不到這個實(shí)際運(yùn)用起來的時候的作用
文字環(huán)繞 float
屬性：
left 元素向左浮動
right 元素向右浮動
例子：
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
/*float: left;*/
}
</style>
</head>
<body>
<img id="a" src="小貓.jpg">
<p>怎么算是文字環(huán)繞型</p>
</body>
</html>
這時候，網(wǎng)頁效果是：
當(dāng)設(shè)定了文字環(huán)繞后
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
float: left;
}
</style>
</head>
<body>
<img id="a" src="小貓.jpg">
<p>怎么算是文字環(huán)繞型</p>
</body>
</html>
效果：
emm~~~~~~
那我這樣寫可以嗎？
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
}
</style>
</head>
<body>
<p>這算是手動的<img id="a" src="小貓.jpg">文字環(huán)繞型嗎？</p>
<p>怎么算是文字環(huán)繞型</p>
</body>
</html>
效果：
貌似也可以，強(qiáng)行把它夾在文字中間…
背景樣式
屬性：
background-image: url(); 圖片背景
background-color: 顏色; 顏色背景
background-repeat: 屬性; 背景圖片如何重復(fù)鋪陳
background-position: 值; 定義背景圖片位置
background-attachment: fixed; 固定背景圖片，使其不動
背景圖片：
用法的話，放到div或父類內(nèi)
值得注意的是，它不是直接把圖片全顯示在網(wǎng)頁上，而是你網(wǎng)頁有多大，他就鋪多少，見下列代碼和效果#a{background-image: url(小貓.jpg);}
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
#a{background-image: url(小貓.jpg);}
</style>
</head>
<body>
<div id="a">
<p>這是一句沒有營養(yǎng)的話</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果：
背景顏色：
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
#a{background-color: aqua;}
</style>
</head>
<body>
<div id="a">
<p>這是一句沒有營養(yǎng)的話</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果：
背景圖片重復(fù)
屬性：
repeat 在水平方向和垂直方向上同時平鋪（默認(rèn)值）
repeat-x 只在水平方向上平鋪
repeat-y 只在垂直方向上平鋪
no-repeat 不平鋪
如下例子：
定義了div的格式，背景圖片
然后定義父類平鋪
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
div
{
background-image: url(x.gif);
}
#a{background-repeat: repeat;}
</style>
</head>
<body>
<div id="a">
<p>這是一句沒有營養(yǎng)的話</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果：
背景圖片位置
用法：background-position: 水平距離像素 垂直距離像素; 這里的距離指到網(wǎng)頁左邊界和上邊界的距離
也可以用關(guān)鍵字，對應(yīng)關(guān)系如下
其實(shí)就是幾個關(guān)鍵字組合來定義位置，上下左右中
top 上
center 中
right 右
bottom 下
left 左
用的時候，關(guān)鍵字可以兩兩組合
如 right bottom 就代表右下
<!DOCTYPE html>
<html>
<head>
<title>這是一個標(biāo)題</title>
<meta charset="utf-8"/>
<style>
div
{
width: 100px;
height: 100px;
background-position: 50px 50px;
background-image: url(x.gif);
background-repeat: no-repeat;
}
/* #a{background-repeat: no-repeat;} */
</style>
</head>
<body>
<div id="a">
<p>這是一句沒有營養(yǎng)的話</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-802225.html
背景圖片固定
用法：background-attachment: fixed; 這樣就是讓背景圖片固定在一處，網(wǎng)頁滾動不隨著變化,一般應(yīng)該用不到background-attachment: scroll; 隨元素滾動，這個是默認(rèn)的，所以這個應(yīng)該基本用不到文章來源地址http://www.zghlxwxcb.cn/news/detail-802225.html
到了這里，關(guān)于HTML--CSS--圖片和背景樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
