1. 程式人生 > >HTML學習筆記 CSS樣式 第六節 (原創)

HTML學習筆記 CSS樣式 第六節 (原創)

Y軸 重復 eight -i tac 圖片 500px itl idt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樣式</title>
<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<p>測試能否被繼承</p>
<h2>啦啦啦啦啦啦啦啦</h2>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
<p>測試能否被繼承</p>
</body>
</html>



css文件tzy.css
body {
background: blue;
/*背景顏色,不能被繼承*/
background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
/*設置圖片*/
width: 900px;
height: 900px;
background-size: 500px 500px;
/*設置圖片大小*/
background-repeat: no-repeat;
/*設置圖片不允許重復*/
background-attachment: fixed;
/*設置滾動頁面的時候圖片不滾動*/

}

p {
width: 150px;
height: 20px;
background: red;
}

h2 {
background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
/*設置圖片*/

background-repeat: repeat;
/*設置圖片允許重復(默認)*/
background-repeat: repeat-x;
/*設置圖片X軸可以重復*/
background-repeat: repeat-y;
/*設置圖片y軸可以重復*/
background-repeat: no-repeat;
/*設置圖片不允許重復*/
background-position: right center;
/*設置圖片起始位置可以寫入 100px 100px*/

}

HTML學習筆記 CSS樣式 第六節 (原創)