CSS中對圖片(background)的一些設置心得總結

来源:http://www.cnblogs.com/fingerboy/archive/2016/01/20/5146229.html
-Advertisement-
Play Games

寫網頁的時候很多情況需要對圖片進行操作,如何在不進行專業的美工裁切操作的情況下而讓自己的素材度達到最大的滿意度呢,這是一個問題,對於懶得開ps切圖的我,通常會直接在網路上download一張圖片,直接拖到html里,這就需要對圖片的css樣式進行一些調整,鑒於我總是記不住一些樣式屬性而無法讓圖片.....


  寫網頁的時候很多情況需要對圖片進行操作,如何在不進行專業的美工裁切操作的情況下而讓自己的素材度達到最大的滿意度呢,這是一個問題,對於懶得開ps切圖的我,通常會直接在網路上download一張圖片,直接拖到html里,這就需要對圖片的css樣式進行一些調整,鑒於我總是記不住一些樣式屬性而無法讓圖片按我的想法擺放,不得已每次都要百度一下,幾次下來,讓我很是惱火,於是專門整理了一些css中關於圖片的一些屬性設置,置於此,以供下次望及時查看(廢話真多):

  css2中關於background的屬性有:

  •  background-color: 指定填充背景的顏色,不引圖片只需要一個純色背景時用,這種情況下也可直接時用

 

      background:#eee;
  •  background-image: 引用圖片作為背景,如 
      backgroud-image:url("img/bg.jpg");
  •  background-position: 指定元素背景圖片的位置,這個很多人都不習慣用,但還是蠻有用處的,實際中圖片的左上角正對應元素的左上角,當你的打算使用像素來定位的時候,可以使用:
    background-position: 0 0;//第一個數字代表x軸水平位置,第二個數字代表y軸垂直位置
    background-position: 0 100px;
  當你的元素尺寸不適用像素設置的時候,還可以使用其他數值,如
   background-position: top right; // 圖片的top對應元素的top 圖片的right對應元素的right
   background-position:  100% 50%; //使用元素的百分比數值設置圖片位置,道理同上
  •  background-repeat: 決定是否重覆背景圖片,取值有以下幾種:
     background-repeat: repeat;       //圖片可重覆
     background-repeat: no-repeat ; //圖片不可重覆
     background-repeat: repeat-x;    //圖片在x軸上可以重覆
     background-repeat: repeat-y;    //圖片在y軸上可以重覆
     background-repeat: inherit;       //遵從父元素的設置 
  • background-attachment: 決定背景圖是否隨頁面滾動,取值有:
    background-attachment: scroll; //預設值;表示背景緊貼元素
    background-attachment: fixed;  //背景不隨元素滾動,當頁面向下時,背景待在最初相對於瀏覽器的位置
    background-attachment: inherit;//遵循父元素的設定

  當希望設置background的多個屬性時,可以分別設置每一個,也可以合併為一行,寫在一個屬性里:

  background: transparent url(image.jpg) 50% 0 scroll repeat-y;

         css3中對於background添加了很多屬性:

  • background-color,設置圖片的大小尺寸,取值有好幾個:
      background-size: contain;     //縮小圖片以適應元素的尺寸(圖片寬高比不變)
      background-size: cover;       //擴展圖片以填滿元素(圖片寬高比不變)
      background-size: 50% 100%;    //自定義調整圖片大小 

     

  • background-clip,背景修剪,可以很好的控制背景的顯示位置:取值有:
     background-clip: border-box;   //背景顯示在邊框內
     background-clip: padding-box;  //背景顯示在padding內(不是邊框內)
     background-clip: content-box;  //只在內容內顯示背景(不在padding中,也不在邊框中)

  還有兩個屬性為,background-break和background-origin,我對這兩個屬性並沒有使用過,看了看網上的講解覺得沒啥大用處,這裡就不寫下來誤人子弟了。

css中關於背景的知識點還是很博大精深的,以後有新的理解,再往這兒添。

註:文章參考》》》》http://blog.csdn.net/adenfeng/article/details/8199362

 


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

-Advertisement-
Play Games
更多相關文章
  • 只能輸入中文
  • css樣式表中四種屬性選擇器1> 簡易屬性tag[class]{ font-weight:bold }It will affect all tag with any class.e.g. or 2>精確屬性值a[href="http://www.cnblogs.cn"][title="textTi....
  • 一、Asp.net中的線程池設置 在Asp.net的服務處理中,每當伺服器收到一個請求,HttpRuntime將從HttpApplication池中獲取一個HttpApplication對象處理此請求,請求的處理過程將被排入線程池中,對於Asp.net來說,在Machine.config文件的pr....
  • 關於繼承好吧,說到底JS還是原型繼承的,而不是類繼承。所以在這個上面要經常用到prototype去繼承另一個對象。所有的構造器函數都約定命名為首字母大寫的形式,並且不以首字母大寫的形式拼寫任何其它的東西。當然一個更好的備選方案是根本就不用new。(太棒了,你說什麼就是什麼咯,我就當JS沒這個東西了)...
  • 一提到非同步交互大家就會說ajax,仿佛ajax這個技術已經成為了非同步交互的代名詞.那下麵將研究ajax的核心對象!利用ajax實現非同步交互無非4步:1.創建ajax核心對象2.與伺服器建立連接3.向伺服器發送請求4.接收伺服器響應的數據看似神秘的非同步交互當明確這4步後,也許在大家腦海裡已經有了初步的...
  • 由於本人也是邊學邊寫,因此整理的比較亂,下麵放出我例子的完整代碼,方便大家交流測試,如有問題歡迎評論首先,表格採用的是BootStrap樣式編輯的,主要使用的是angularjs,為了方便也有jQuery的方法,在測試時需自行引入bootstrap,angularjs和jq的文件。 整體代碼預覽:H...
  • 在ng-repeat中使用ng-model時會有許多問,有的人碰到無法獲取綁定的數據內容,有的人遇到改動綁定的數據內容時所有迴圈生成的內容一起改變。上面的問題我在開發時也遇到過,但是解決後我卻怎麼也還原不了那種情況了,只能先簡單介紹一下無法獲取的情景該如何解決。例如:html: ...
  • 前言 近來由於工作需要,需要提取某些城市的經緯度坐標,稍微搜索了一下,發現百度地圖和高德地圖都提供了相關的函數和例子.那麼剩餘的工作也就比較簡單了,保存坐標,然後轉換為WGS坐標,這樣才能和現有的GPS數據以及地圖匹配.主要問題和解決方法本地保存文件跨瀏覽器支持 由於安全的原因,JavaScript...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...