亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 11
粉絲 0
評(píng)論 0
訪問量 17191
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS背景屬性、精靈圖和字體圖標(biāo)引用流程
Blueprint
原創(chuàng)
1647人瀏覽過

背景常用屬性

先來個(gè)概述圖：

color（顏色）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         /* 設(shè)定div大小 */
  11.         width: 200px;
  12.         height: 200px;
  13.         /* 邊框線方便演示 */
  14.         border: 1px dashed black;
  15.         float: left;
  16.       }
  17.       .box {
  18.         /* 背景顏色:16進(jìn)制 */
  19.         background-color: #eee;
  20.       }
  21.       .box2 {
  22.         /* 背景顏色:rgb */
  23.         background-color: rgb(109, 109, 109);
  24.       }
  25.       .box3 {
  26.         /* 背景顏色:單詞 */
  27.         background-color: gray;
  28.       }
  29.       .box4 {
  30.         /* 背景顏色:rgba */
  31.         background-color: rgb(109, 109, 109,0.5) ;/*其中a代表透明度*/
  32.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="box">box</div>
  41.     <div class="box2">box2</div>
  42.     <div class="box3">box3</div>
  43.     <div class="box4">box4</div>
  44.   </body>
  45. </html>

image（背景圖片）和repeat（重復(fù)性）

背景默認(rèn)顯示方式：垂水平直平鋪

No-repeat:不重復(fù)

Repeat-x:水平平鋪

Repeat-y:垂直重復(fù)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         /* 設(shè)定div大小 */
  11.         width: 600px;
  12.         height: 600px;
  13.         /* 邊框線方便演示 */
  14.         border: 1px dashed black;
  15.         float: left;
  16.         margin: 0 20px;
  17.       }
  19.       .box {
  20.           /* 圖片地址可以為本地圖片和網(wǎng)絡(luò)地址 */
  21.         /* 背景默認(rèn)顯示方式,水平垂直平鋪 */
  22.         background-image: url("1.jpeg");
  23.       }
  24.       .box2 {
  25.         /* 不重復(fù) */
  26.         background-image: url("1.jpeg");
  27.         background-repeat: no-repeat;
  28.       }
  29.       .box3 {
  30.         /* 水平平鋪 */
  31.         background-image: url("1.jpeg");
  32.         background-repeat: repeat-x;
  33.       }
  34.       .box4 {
  35.         /* 垂直平鋪 */
  36.         background-image: url("1.jpeg");
  37.         background-repeat: repeat-y;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="box">box</div>
  43.     <div class="box2">box2</div>
  44.     <div class="box3">box3</div>
  45.     <div class="box4">box4</div>
  46.   </body>
  47. </html>

sizing(大小)

屬性值cover 寬和高較高值得比例縮放 會(huì)破壞圖片的顯示效果

屬性值contain 寬和高較低值得比例縮放 不會(huì)破壞圖片的顯示效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       div {
  9.         /* 設(shè)定div大小 */
  10.         width: 600px;
  11.         height: 800px;
  12.         /* 邊框線方便演示 */
  13.         border: 1px dashed black;
  14.         float: left;
  15.         margin: 0 20px;
  16.       }
  17.       .box1 {
  18.         /* 導(dǎo)入圖片 */
  19.         background-image: url("1.jpeg");
  20.         /* 設(shè)置不重復(fù) */
  21.         background-repeat: no-repeat;
  22.         /* 屬性值contain  寬和高較低值得比例縮放 不會(huì)破壞圖片的顯示效果*/
  23.         background-size: contain;
  24.       }
  25.       .box2 {
  26.         /* 導(dǎo)入圖片 */
  27.         background-image: url("1.jpeg");
  28.         /* 設(shè)置不重復(fù) */
  29.         background-repeat: no-repeat;
  30.         /* 屬性值cover  寬和高較高值得比例縮放 會(huì)破壞圖片的顯示效果*/
  31.         background-size: cover;
  32.       }
  33.       .box3 {
  34.         /* 導(dǎo)入圖片 */
  35.         background-image: url("1.jpeg");
  36.         /* 設(shè)置不重復(fù) */
  37.         background-repeat: no-repeat;
  38.         /* 數(shù)值 */
  39.         background-size: 200px 200px;
  40.       }
  41.       .box4 {
  42.         /* 導(dǎo)入圖片 */
  43.         background-image: url("1.jpeg");
  44.         /* 設(shè)置不重復(fù) */
  45.         background-repeat: no-repeat;
  46.         /* 百分百 */
  47.         background-size: 20% 20%;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="box1">box1</div>
  53.     <div class="box2">box2</div>
  54.     <div class="box3">box2</div>
  55.     <div class="box4">box2</div>
  56.   </body>
  57. </html>

position（定位）

數(shù)值定位是，屬性值是有順序的

屬性值只有一個(gè)，第二個(gè)默認(rèn)center

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         width: 800px;
  11.         height: 1000px;
  12.         border: 1px dashed red;
  13.         float: left;
  15.         /* 導(dǎo)入圖片 */
  16.         background-image: url('1.jpeg');
  17.         /* 防止重復(fù) */
  18.         background-repeat: no-repeat;
  19.       }
  21.       .box1{
  22.           /* 數(shù)值定位,水平/垂直  有順序 */
  23.           background-position: 100px ;
  25.       }
  26.       .box2{
  27.           /* 方位定位,無順序要求 */
  28.           background-position:  center left;
  29.       }
  31.       .box3{
  32.       /* 方位定位,無順序要求 */
  33.       background-position:  100%  20%;
  34.   }
  36.   /* 定位時(shí),單個(gè)值,第二個(gè)值默認(rèn)center */
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="box1"></div>
  41.     <div class="box2"></div>
  42.     <div class="box3"></div>
  43.   </body>
  44. </html>

背景固定

使用fixed屬性值時(shí)，圖片脫離原有的位置，可以使用定位。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  9.   <style>
  10.     body > * {
  11.       float: left;
  12.       border: 1px dashed red;
  13.       margin: 0 100px;
  14.     }
  15.     .box1,
  16.     .box2 {
  17.       width: 600px;
  18.       height: 600px;
  19.       overflow: scroll;
  20.     }
  22.     .box3,
  23.     .box4 {
  24.       width: 256px;
  25.       height: 600%;
  26.       background-repeat: no-repeat;
  27.       background-image: url("1.jpeg");
  28.     }
  30.     .box3 {
  31.       /* 固定背景 */
  32.       background-attachment: fixed;
  33.       /* 定位背景位置 */
  34.       background-position: 120px 20px;
  35.     }
  36.     .box4 {
  37.       /* 背景不固定默認(rèn)值*/
  38.       background-attachment: scroll;
  39.     }
  40.   </style>
  41.   <body>
  42.     <div class="box1">
  43.       <div class="box3"></div>
  44.     </div>
  45.     <div class="box2">
  46.       <div class="box4"></div>
  47.     </div>
  48.   </body>
  49. </html>

簡(jiǎn)寫屬性

background：顏色 圖片 重復(fù) 固定 定位；

同時(shí)擁有顏色和圖片時(shí)， 圖片會(huì)覆蓋顏色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  9.   <style>
  10.     div {
  11.       width: 500px;
  12.       height: 500px;
  13.       border: 1px dashed red;
  14.       /* 屬性簡(jiǎn)寫 */
  15.       background: #ccc url("1.jpeg") no-repeat scroll 100px 20px;
  16.     }
  17.   </style>
  18.   <body>
  19.     <div></div>
  20.   </body>
  21. </html>

精靈圖

什么是精靈圖：

css精靈(CSS sprites),是一種網(wǎng)頁(yè)圖片應(yīng)用處理技術(shù)。主要是指將網(wǎng)頁(yè)中需要的零星的小圖片集成到一個(gè)大的圖片中

應(yīng)用的原因：

  1. 減少對(duì)瀏覽器的請(qǐng)求次數(shù)，避免網(wǎng)頁(yè)的延遲
  2. 方便小圖標(biāo)的統(tǒng)一管理

精靈圖的使用： css精靈圖需要配合背景的圖片和背景定位

  1.       <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 960px;
  10.         height: 500px;
  11.         border: 1px solid black;
  13.         clear: both;
  14.       }
  15.       .box > *:not(img) {
  16.         width: 100px;
  17.         height: 100px;
  18.         border: 1px dashed red;
  19.         float: left;
  20.       }
  22.       .box1 {
  23.         /* 導(dǎo)入圖片 */
  24.         background-image: url("1.png");
  26.         /* 定位背景獲取精靈圖上需要的部分圖片 */
  27.         background-position: 0px -30px;
  28.       }
  29.       .box2 {
  30.         /* 導(dǎo)入圖片 */
  31.         background-image: url("1.png");
  32.         /* 定位背景獲取精靈圖上需要的部分圖片 */
  33.         background-position: 100px -30px;
  34.       }
  35.       .box3 {
  36.         /* 導(dǎo)入圖片 */
  37.         background-image: url("1.png");
  38.         /* 定位背景獲取精靈圖上需要的部分圖片 */
  39.         background-position: -90px -120px;
  40.       }
  41.       .box4 {
  42.         /* 導(dǎo)入圖片 */
  43.         background-image: url("1.png");
  44.         /* 定位背景獲取精靈圖上需要的部分圖片 */
  45.         background-position: -275px -210px;
  46.       }
  47.       .box5 {
  48.         /* 導(dǎo)入圖片 */
  49.         background-image: url("1.png");
  50.         /* 定位背景獲取精靈圖上需要的部分圖片 */
  51.         background-position: 0px -30px;
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <div class="box">
  57.       <div class="box1"></div>
  58.       <div class="box2"></div>
  59.       <div class="box3"></div>
  60.       <div class="box4"></div>
  61.       <div class="box5"></div>
  62.       <img src="1.png" alt="" />
  63.     </div>
  64.   </body>
  65. </html>

字體圖標(biāo)

眾所周知，單位字體的文件大小小于圖片的大小，考慮精靈圖處理的是一張張圖片，有人就有了一個(gè)奇思妙想—把圖片轉(zhuǎn)換成字體（實(shí)際上字體本來就是那么設(shè)計(jì)下來的。）

轉(zhuǎn)換成字體后，可以使用特殊的代碼來顯示出指定的圖片。

字體圖標(biāo)比精靈圖有一個(gè)非常明顯的好處，因?yàn)樗亲煮w，所以它能夠改變字體顏色，能改變字體大?。ú⑶也粫?huì)失真）。

例子：

僅演示字體圖標(biāo)的使用

1.獲取字體圖標(biāo)

iconfont（下面演示使用）

Font Awesome

IconMonstr

IconShock·····

? 多圖演示獲取步驟：


將下載的壓縮包解壓獲取文件夾，并將壓縮包下的所有文件移動(dòng)到項(xiàng)目（也可將文件夾拖至項(xiàng)目，保證項(xiàng)目的目錄層次）

  1. 字體引用

    第一步：引入項(xiàng)目下面生成的 fontclass 代碼：

  1. <link rel="stylesheet" href="./iconfont.css">

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

  1. <span class="iconfont icon-xxx"></span>

批改老師：WJWJ

批改狀態(tài)：合格

老師批語(yǔ)：總得來說寫的不錯(cuò)很認(rèn)真，不要重復(fù)提交！
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)