CSS基礎-背景

来源:https://www.cnblogs.com/haloujava/archive/2023/06/29/17514866.html
-Advertisement-
Play Games

為了提高研發效率，經過技術選型採用了taro3+原生混合開發模式，本文主要講解我們是如何基於taro框架，進行多端能力的探索和性能優化。 ...


背景

background-color

背景顏色， 可以使用十六進位、rgb、rgba表示。

語法


/**selector  背景元素的原則去*/
/** color  背景顏色的值， 可以是 顏色名稱、十六進位值、RGB、RGBA*/
selector {
  background-color: color;
}

示例

/** 設置body標簽背景為白色 */
body {
  background-color: white;
}

/**設置h1標簽背景為紅色*/
h1 {
  background-color: #ff0000;
}

/**設置p元素背景顏色為黃色*/
p {
  background-color: rgb(255, 255, 0);
}

/**設置背景顏色為半透明的藍色*/
div {
  background-color: rgba(0, 0, 255, 0.5);
}

background-image

背景圖片；該屬性可以通過圖片路徑引用一張外部圖片。圖片路徑可以是相對論路徑、絕對路徑也可以是網路當中圖片，支持HTTP協議。

語法

/**selector  表示選擇器*/
/**url 圖片路徑*/
/**相對路徑是書寫位置到圖片位置的相對路徑
*/
selector {
  background-image: url(url);
}

示例

創建一個網頁， 使得body、h1、div 擁有不同的背景圖片。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景圖片演示</title>
    <style>
			/**相對路徑， images目錄下必須要有 background-body.jpg 圖片*/
      body {
        background-image: url("images/background-body.jpg");
      }
			/**引用網路當中的圖片*/
      h1 {
        width: 100px;
        height: 100px;
        background-image: url("https://pic4.zhimg.com/v2-bbddbb4b7769475ccb591cc39106b146_r.jpg?source=1940ef5c");
      }
		  /**使用 linear-gradient 漸變函數*/
      div {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to right, red, orange, yellow);
      }
    </style>
  </head>
  <body>
    <h1></h1>
    <div></div>
  </body>
</html>

線性漸變

background-image屬性可以使用 linear-gradient()形式創建線性漸變背景。

background-image: linear-gradient(to right, blue, red)
                                    漸變方向 開始顏色 結束顏色						
#漸變方向也可以用度數表示
background-image:  linear-gradient(45deg, blue, red)

#可以有多個顏色值
background-image: linear-gradient(to right, blue, yellow 20%, red)
																										表示中間色

linear-gradient 的詳細用法可以參考 地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

backgroud-repeat 重覆方式

background-repeat 屬性用來設置背景的重覆模式。

值 意義
repeat; x、y均平鋪（預設）
repeat-x; x平鋪
repeat-y; y平鋪
no-repeat; 不平鋪

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景是否重覆背景展示</title>
    <style>
      div {
        border: 1px solid red;
        width: 900px;
        height: 600px;
        margin-bottom: 10px;
        background: transparent
          url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
      }

      .box1 {
        background-repeat: repeat;
      }

      .box2 {
        background-repeat: repeat-x;
      }

      .box3 {
        background-repeat: repeat-y;
      }

      .box4 {
        background-repeat: no-repeat;
      }

      body {
        background-image: url(https://pic4.zhimg.com/v2-bbddbb4b7769475ccb591cc39106b146_r.jpg?source=1940ef5c);
      }
    </style>
  </head>
  <body>
    <div class="box1">box1背景重覆(預設)</div>
    <div class="box2">box2背景X軸重覆</div>
    <div class="box3">box3背景Y軸重覆</div>
    <div class="box4">box4背景不重覆</div>
  </body>
</html>

background-size 背景尺寸

  • background-size 屬性用來設置 背景圖片的尺寸，相容到IE9。
  • background-size 的值可以用像素表示，也可以用百分比表示，表示為盒子寬、高的百分之多少。
  • 需要等比例的值，用auto代替。
  • contain 特殊值， 背景智能改變尺寸以容納到盒子里， 可能背景會出現空白區域。
  • cover 特殊值， 將背景圖片智能改變尺寸以撐滿盒子。
/* 設置一個值， 此時代表的是背景圖片的寬度，高度預設auto*/
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* 第一個值設置寬度，第二個值設置高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景大小設置</title>
    <style>
      /* background-size 使用 auth */
      .box1 {
        width: 500px;
        height: 300px;
        border: 1px solid #000;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-size: 300px auto;
        margin-bottom: 10px;
      }

      /* background-size 使用百分比 */
      .box2 {
        width: 500px;
        height: 300px;
        border: 1px solid #000;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-size: 50% 50%;
        margin-bottom: 10px;
      }

      /* background-size 使用 contain 智能背景圖片尺寸，以容納到盒子里 */
      .box3 {
        width: 400px;
        height: 300px;
        border: 1px solid #000;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: 10px;
      }

      /* background-size 使用 cover 智能改變尺寸，以撐滿盒子 */
      .box4 {
        width: 400px;
        height: 300px;
        border: 1px solid #000;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-size: cover;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>

background-clip 背景繪製區域

指定背景的繪製區域。

預設情況下，背景被繪製到元素的邊框外沿，但是可以通過 background-clip 屬性來控制背景的繪製區域。

語法

background-clip: border-box | padding-box | content-box;
  • border-box: 背景延伸至邊框外沿（但是在邊框下層）， 預設值。
  • padding-box: 背景延伸至內邊距（[padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding)）外沿。不會繪製到邊框處。
  • content-box: 背景被裁剪至內容區（content box）外沿。

示例

三種取值的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制背景的控制區域</title>
    <style>

        /* 裁剪到內容區域 */
        .box1 {
            width: 400px;
            height: 300px;
            padding: 50px;
            border: 10px dotted red;
            background-color: yellow;
            background-clip: content-box;
            margin-bottom: 10px;
        }

        /* 裁剪至邊框區域（包含border） */
        .box2 {
            width: 400px;
            height: 300px;
            padding: 50px;
            border: 10px dotted red;
            background-color: yellow;
            background-clip: border-box;
            margin-bottom: 10px;
        }

        /* 裁剪至pading區域（包含padding） */
        .box3 {
            width: 400px;
            height: 300px;
            padding: 50px;
            border: 10px dotted red;
            background-color: yellow;
            background-clip: padding-box;
        }

        
    </style>
</head>
<body>
    <div class="box1">div1</div>
    <div class="box2">div2</div>
    <div class="box3">div3</div>
</body>
</html>

background-origin 背景圖片定位區域

指定背景圖片的定位區域。

預設情況下，背景圖片的定位區域是元素的 padding box。但是可以使用 background-origin 屬性來控制背景圖片的定位區域。

語法

background-origin: border-box | padding-box | content-box;
  • border-box：背景圖片的擺放以 border 區域為參考， 以邊框的左上角外沿為基準。
  • padding-box：背景圖片的擺放以 padding 區域為參考， 以padding的左上角外沿為基準。
  • content-box：背景圖片的擺放以 padding 區域為參考，以 padding內真正的內容的外沿為基準。

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-origin 定位起始位置</title>
    <style>
      /*  背景圖片/顏色 從 邊框開始（包含邊框） */
      .box1 {
        height: 400px;
        width: 300px;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-origin: border-box;
        background-repeat: no-repeat;
        border: 10px dotted red;
      }

      /*  背景圖片/顏色 從 內容開始 (包含內容) */
      .box2 {
        height: 400px;
        width: 300px;
        padding: 30px;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        border: 10px dotted red;
        background-origin: content-box;
        background-repeat: no-repeat;
      }

      /* 預設 background-origin 是 padding-box 
           background-origin 從 padding 開始（包含padding區域）
        */
      .box3 {
        height: 400px;
        width: 300px;
        padding: 30px;
        border: 10px dotted red;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-repeat: no-repeat;
        /* background-origin: padding-box; */
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2">qqqqd</div>
    <div class="box3"></div>
  </body>
</html>

background-attachment

background-attachment 決定了背景圖像的位置是在視口內固定，或者包含它的區塊滾動。

值 意義
fixed 背景圖像固定在視口中，不隨頁面滾動而滾動。
local 背景圖像會隨著元素內容的滾動而滾動，而不是隨頁面滾動而滾動。
scroll 背景圖像會隨著頁面的滾動而滾動(預設)。 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景定位演示</title>
    <style>
      body {
        height: 3000px;
      }
      .box1 {
        position: relative;
        top: 100px;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        /* 縱向溢出的內容，用滾動條顯示 */
        overflow-y: scroll;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-attachment: scroll;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
      <p>內容1</p>
    </div>
  </body>
</html>

background-position 圖片其實位置

精確設置圖像的初始位置。屬性值可以使用 px 像素描述，也可以用 top、bottom、center、left、right描述圖片的位置。

/**水平方向 在上， 垂直方向 預設為 center*/
background-position: top;

/**水平方向 在左， 垂直方向再上 （左上角）*/
background-position: left top;

/**定義了 水平位置 25% 垂直位置25%。 左上角 定義為 0%， 右下角定義為 100% 100%*/
background-position: 25% 75%;

/**水平位置 10像素 垂直為 10像素 。 左上角定義為 0px 0px*/
background-position: 10px 10px;

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景圖片定位位置</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-size: 50% auto;
        background-repeat: no-repeat;
        background-position: 0px 0px;
      }

      .box2 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
        background-size: 50% auto;
        background-repeat: no-repeat;
        background-position: top right;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

精靈圖技術

將多個小圖標放在一個圖片上，並使用 background-position 技術只顯示其中一個。

優點： 減少http請求次數

缺點： 不方便測量，後期改動麻煩

示例

展示精靈圖

  1. 網路中搜索隨便搜索一張CSS精靈圖 https://img-blog.csdnimg.cn/20201101235915402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xJVUNIVUFOUUkxMjM0NQ==,size_16,color_FFFFFF,t_70#pic_center

  2. 使用 PS 測量圖標在圖片當中的位置

    ps中選擇切片工具， 選擇需要測量的圖片後雙擊，彈出層終的 x、y表示其在圖片中的橫縱坐標位置。 w、h分別表示圖片的寬度和高度

  3. 編寫代碼

    指定 background-position: - 376px 0px; （以盒子左上角為原點， 相當於把 圖片往左拉動 376 像素，往上拉動 0px ）

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css精靈圖演示</title>
    <style>
      .dui {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 37px;
        height: 42px;
        border: 1px solid #000;
        background-image: url(images/jinglingtu.jpeg);
        background-position: -376px 0px;
      }
    </style>
  </head>
  <body>
    <i class="dui"></i>
  </body>
</html>

background 合寫屬性

可以使用 background 屬性來同時設置背景顏色、背景圖片、背景位置、背景大小等屬性。

語法

selector {
  background: color url(image.jpg) no-repeat center center / cover;
}

示例

例如將背景顏色設置為黃色，背景圖片為 01.jpg ，不重覆，居中對齊 。


background: yellow    url(image/01.jpg) no-repeat center center 
            背景顏色   背景圖片           背景重覆  背景位置
請關於一下啦^_^

微信公眾號


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 構建數字工廠丨數據分析與圖表視圖模型的配置用法
    摘要：本期結合示例，詳細介紹華為雲數字工廠平臺的數據分析模型和數據圖表視圖模型的配置用法。 本文分享自華為雲社區《數字工廠深入淺出系列（六）：數據分析與圖表視圖模型的配置用法》，作者：雲起MAE 。 華為雲數字工廠平臺基於“數據與業務一體化”理念，提供統一的製造全域數據平臺底座，內置輕量級製造數據分 ...
  • 券商數字化創新場景數據中台實踐
    時下，眾多金融機構在積極推行數字化改革，以適應時代高速革新。為回應市場對信息即時生效的迫切需求，各家[券商機構](https://www.dtstack.com/solution/securities?src=szsm)都需要更具競爭力的信息服務。 本次方案結合券商場景與業務實踐，圍繞客戶實際面臨的 ...
  • 數字先鋒|雲上醫院長什麼樣？寧夏固原中醫醫院帶你一探究竟！
    衛健行業是關乎國家和民生安全的關鍵行業。近年來，雲計算、大數據、人工智慧等技術不斷發展，並與醫療行業深入融合。同時，相關部門相繼頒發一系列政策，進一步推動醫療行業數字化、智慧化轉型，促進探索健康中國高質量發展道路。 ...
  • MySQL 8.0.33 my.ini說明
    #其他預設調整值#MySQL Server實例配置文件# #由MySQL Server實例配置嚮導生成###安裝說明# ##在Linux上，您可以將此文件複製到/etc/my.cnf以設置全局選項，#mysql-data-dir/my.cnf設置伺服器特定選項（用於此安裝的@localstatedi ...
  • 面試官：講講MySql索引失效的幾種情況
    ## 索引失效 ### 準備數據： ```sql CREATE TABLE `dept` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `deptName` VARCHAR(30) DEFAULT NULL, `address` VARCHAR(40) DEFAUL ...
  • 【技術積累】Mysql中的SQL語言【一】
    博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...
  • MySQL學習1--基礎
    一、資料庫常規概念 1、什麼是資料庫 資料庫是“按照數據結構來組織、存儲和管理數據的倉庫”。 2、有哪些常見的資料庫管理系統 關係型資料庫：存儲的數據是表結構的數據 ​ MySQL Oracle SQLServer DB2 SQLite ​ 非關係型資料庫：存儲的是鍵值對形式的數據 ​ redis ...
  • 記錄--寫一個高德地圖巡航功能的小DEMO
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 風格設置 載入地圖 使用AMapLoader.load載入地圖，從 控制台 申請一個屬於自己的key import AMapLoader from '@amap/amap-jsapi-loader'; ... const AMap = a ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類