背景圖片之background的用法

来源:https://www.cnblogs.com/flashman/archive/2018/08/12/9462171.html
-Advertisement-
Play Games

常用的background背景屬性有: background-color 設置顏色作為對象背景顏色background-image 設置圖片作為背景圖片background-repeat 設置背景平鋪重覆方向background-attachment 設置或檢索背景圖像是隨對象內容滾動還是固定的。b ...


常用的background背景屬性有:

background-color 設置顏色作為對象背景顏色
background-image 設置圖片作為背景圖片
background-repeat 設置背景平鋪重覆方向
background-attachment 設置或檢索背景圖像是隨對象內容滾動還是固定的。
background-position 設置或檢索對象的背景圖像位置。

背景圖片自適應:

相應語法:background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain ;

1、background-size取固定值,設定背景圖片的大小。

{........

 

 -moz-background-size:200px 100px;     -webkit-background-size:200px 100px;     -o-background-size:200px 100px;     background-size:200px 100px; ......

 

}

2、background取百分比:俺比例設定背景圖片的大小

{.......

 

-moz-background-size:90% 60%;     -webkit-background-size:90% 60%;     -o-background-size:90% 60%;     background-size:90% 60%;

.......

 

}

3、background取cover,當圖片小於背景塊時,為了填滿背景,原圖等比放大。

{.......

 

    -moz-background-size:cover;     -webkit-background-size:cover;     -o-background-size:cover;     background-size:cover;

.......

 

}

4、background取contain,當圖片大於背景塊時,為了填滿背景,圖片會被等比縮小。

{.......

 

-moz-background-size:contain;     -webkit-background-size:contain;     -o-background-size:contain;     background-size:contain;

.........

 

}

5、background取auto,zuto是預設值,圖片不做任何改變。


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

-Advertisement-
Play Games
更多相關文章
  • 結果如下:顯示一個向左滑動的相冊[來回滾動] ...
  • 最近學習了VUE,自己為了學習做了個小小的博客,功能很簡單,不過開發過程中也遇到了很多坑,所以記錄下來方便以後使用。歡迎大家交流學習。 ...
  • 今天在github 上看到一個非常巧妙的項目:umpox/TinyEditor 使用簡單的瀏覽器就能構造一個簡單的實時運行代碼的基於瀏覽器的前端編輯器,只需要很少代碼; 使用方法: 粘貼如下代碼到瀏覽器地址欄,(我測試了Chrome), 即可得到這樣一個好用的編輯器。 我們分析下其代碼: 其構造了三 ...
  • 原文鏈接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是標題黨,SB只是 的簡寫。 一. SASS/SCSS ,也稱為 ,是CSS預編譯語言的一種,常見的預編譯語言還包括 ,`Stylus 變數定義 函 ...
  • jQuery 常用核心方法 .each() 遍歷一個jQuery對象,為每個匹配元素執行一個函數 $.extend() jQuery.extend([deep,] target [, object1 ] [, objectN ] )把多個對象進行合併,把所有的屬性添加到第一個對象上 當我們提供兩個或 ...
  • 區別 jQuery 選擇器得到的 jQuery對象 和 原生JS 中的document.getElementById() document.querySelector取得的 DOM對象 是兩種不同類型,兩者是不等價的。jQuery 無法使用 原生DOM對象的方法,原生DOM對象 也不能使用 jQue ...
  • jQuery DOM 操作 創建元素 只需要把DOM字元串傳入$方法即可返回一個 jQuery 對象 添加元素 .append() 在 a 標簽裡面添加內容是b的p標簽 JSBin 其他例子 .appendTo() 相反,把對象插入到目標元素尾部。即在 a 標簽 裡面添加內容是b的p標簽 JSBin ...
  • 摘要:本文是我在學習前端的過程中整理的一些常用css屬性,部分是css3新增的,因能力有限,文中如有錯誤,歡迎提出,我會及時修改。希望對大家有幫助! CSS屬性 CSS屬性 1 1. css顏色屬性 5 1.1. 字體顏色 5 1.2. 背景顏色 5 2. 頁面佈局相關屬性 5 2.1. displ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...