css續集3
1.background屬性
1.1background-image
"默認平鋪整個頁面"
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學城</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-image: url("1.jpg"); } </style> </head> <body> <div class="box1"> </div> </body> </html>
1.2background-repeat:
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學城</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-image: url("1.jpg"); background-repeat: no-repeat; } </style> </head> <body> <div class="box1"> </div> </body> </html>
1.3給元素設置padding,padding區域也會平鋪背景圖片
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學城</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-image: url("1.jpg"); background-repeat: repeat-x; padding: 100px 100px; } </style> </head> <body> <div class="box1"> </div> </body> </html>
1.4repeat應用-背景圖片
"對於對稱的圖片，可以使用repeat效果，用作背景圖片"
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學城</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-image: url("./images/timg2.jpeg"); } </style> </head> <body> <div class="box1"> </div> </body> </html>
1.5background-position
background-position: -100px -100px; 正值 第一個值表示往右偏移 第二個值表示往下移 負值則相反 除了設置像素值，還有下面的設置方法 水平方向屬性值還有三種選擇 left center right 垂直方向屬性值還有三種選擇 top center bottom
1.5.1background-position應用1-雪碧圖技術-在一張大圖中剪切出小圖形
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學城</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ /*48px是一個小圖形的寬和高*/ width: 48px; height: 48px; background-image: url("./images/1.png"); background-repeat: no-repeat; /*這個528px就是該小圖片頂部距離整張圖片頂部的距離*/ background-position: 0px -528px; } .box2{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -440px; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> </body> </html>
1.5.2background-position應用2-通天banner-背景圖形水平居中
/*通天banner*/ background-image: url("./images/banner.jpg"); background-repeat: no-repeat; /*頂部水平居中*/ background-position: top center; /*綜合屬性設置*/ background: url('./images/banner.jpg') no-repeat center top;
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學城</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ height: 812px; padding-top: 100px; background-image: url("./images/banner.jpg"); background-repeat: no-repeat; /*通天banner*/ background-position: top center; } .box2{ width: 960px; height: 36px; border-radius: 5px; overflow: hidden; background-color: purple; margin: 0px auto; } ul{ /*取消ul的樣式*/ list-style: none; } a{ /*去除a標籤的下劃線*/ text-decoration: none; /*一共6個，所以每個設置960/6=160px*/ width: 160px; /*與父元素的高度一樣*/ height: 36px; /*與height相同，可讓字體垂直居中*/ line-height: 36px; font-size: 20px; color: white; /*文字水平居中*/ text-align: center; float: left; } a:hover{ /*滑鼠懸浮時，背景色紅色*/ background-color: red; } </style> </head> <body> <div class="box1"> <div class="box2"> <ul> <li><a href="ww">導航</a></li> <li><a href="ww">導航</a></li> <li><a href="ww">導航</a></li> <li><a href="ww">導航</a></li> <li><a href="ww">導航</a></li> <li><a href="ww">導航</a></li> </ul> </div> </div> </body> </html>
1.6background-attachment: fixed;
"固定背景，滾動頁面時，背景不動，上面的內容會滾動" /*單獨設置*/ background-attachment: fixed; /*綜合屬性設置*/ background: url(./images/timg2.jpeg) no-repeat 0 0 fixed;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1200px; height: 2000px; border: 1px solid red; background: url(./images/timg2.jpeg) no-repeat 0 0 fixed; /*固定 背景 滾動頁面時，背景不動，上面的內容會滾動*/ /*background-attachment: fixed;*/ color: red; } </style> </head> <body> <div> <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> </div> </body> </html>
