您現在的位置是:電腦技術吧?>? 故障問題 ??>??css background屬性,css中background??>??正文詳情

css background屬性,css中background

利琳溪2019-11-15 11:10:39 人圍觀
簡介html中background背景大小的值類型:1或2個值。這些值可以是像素Px、百分比%或自動,也可以是特定值cover和contain。可以為背景大小設置兩個值,一個是必需的,另一個是可css display屬性

background-size的值類型:1個或2個值,這些值既可以是像素px,也可以是百分比%或auto,還可以是特定值cover, contain。

background-size可以設置2個值,1個為必填,1個為可選。

其中第1個值用于指定背景圖的width,第2個值用于指定背景圖的height,如果只給background-size設置1個值,則第2個值默認為auto高度自動 (通常默認高度是auto自動,自適用內容而增高,通常如果想高度自適應不用設置) (cover和contain特定值除外)。

復制代碼代碼如下:div{ background-image:url(test.png); background-repeat:no-repeat; background-size:100px; } 等價于: 復制代碼代碼如下:div{ background-image:url(test.png); background-repeat:no-repeat; background-size:100px auto; } 查看具體DEMO: background-size的值定義。

當你使用firebug抓取到那個實例節點時,你會發現第二個值被自動加上了并且值為auto。

當然,你也可以手動將第2個值設置為auto,然后與該DEMO的實例對比,它們的效果將是相同的。

background-size的特定值: cover: 保持圖像本身的寬高比例,將圖片縮放到正好完全覆蓋定義背景的區域; contain: 保持圖像本身的寬高比例,將圖片縮放到寬度或高度正好適應定義背景的區域; cover值:代碼如下:div{ background-image:url(test.png); background-repeat:no-repeat; background-size:cover; } 上例,背景圖片將覆蓋整個div區域。

查看具體DEMO: background-size:cover。

contain值:代碼如下:div{ background-image:url(test.png); background-repeat:no-repeat; background-size:contain; } 上例,背景圖將縮放到寬度或高度的任意一邊與div區域適應。

查看具體DEMO: background-size:contain。

版權聲明:本文由 利琳溪 整理編輯。

原標題:htmlbackground屬性,css中transform屬性

轉載注明出處:http://www.dn9ww09s.icu/fault/12477.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • origin客戶端安裝慢,origin平臺下載游戲速度慢

    origin客戶端安裝慢,origin平臺下載游戲速度慢 相關圖片origin平臺下載速度慢Origin是EA在2011年搭建并推出的一個全方位的游戲社交平臺。它集成了數字游戲購買、物理版本激活、下載、數據云存儲、社交網絡等功能,正在逐步增加更多功能。...

  • 交互設計,交互設計怎么做

    交互設計,交互設計怎么做 相關圖片為什么做了交互設計還要做動效今天,我花時間看了看銀色的插件。這是第一個內置到sketch中的交互式插件。通過它,可以在不依賴其他軟件的情況下完成草圖交互方案的設計和顯示。...

  • 三星s4卡刷教程,三星s4刷什么系統最好

    三星s4卡刷教程,三星s4刷什么系統最好 相關圖片三星手機s4怎么刷機三星S4是一款非常老的機型。現在大多數用戶將它用作存儲備用機器。該機配備了exynos 5410雙核處理器,運行Android 4.2.2 touchwiz系統三星手機如何刷機...

  • 邊框透明,動態透明邊框

    邊框透明,動態透明邊框 相關圖片手機p圖邊框透明當CSS多邊框背景級別3仍然是草稿時,CSS工作組就是否支持多邊框進行了大量的討論,就像討論多背景圖片一樣。不幸的是,當時認為多個邊界并不有用,即使需要,也可...

  • win8怎么清理c盤,c盤滿了怎么清理win8

    win8怎么清理c盤,c盤滿了怎么清理win8 相關圖片c盤滿了怎么清理win10現在win10系統的份額逐漸接近win7,這意味著越來越多的用戶開始選擇win10。同樣,win8的用戶在厭倦使用win8后,也希望升級到win10。他們想知道win7如何深度清理c盤...

  • opacity屬性,resize屬性

    opacity屬性,resize屬性 相關圖片html透明度屬性RGBA和opacity語法:R:紅色值。正整數|百分比G:綠色值。正整數百分比B:藍色值。正整數百分比A:透明度。值0~1,將CSS代碼復制到剪貼板/*IE6transform屬性...

  • garageband怎么用不了,garage band怎么用

    garageband怎么用不了,garage band怎么用 相關圖片garageband錄音怎么用Garageband是蘋果的數字音樂創作軟件,也可以在iPhone上使用,主要面向業余愛好者。它包括1000首預先錄制好的旋律樣本和50首合成樂器樣本,可以使用garageband電腦版用...

  • 移動硬盤沒有盤符顯示,電腦不顯示移動硬盤怎么辦

    移動硬盤沒有盤符顯示,電腦不顯示移動硬盤怎么辦 相關圖片電腦讀取不了移動硬盤許多人使用移動硬盤來存儲和傳輸數據。移動硬盤的即插即用非常方便。但也有部分用戶遇到了移動硬盤不顯示的情況。我們該怎么辦?一。當移動硬盤不顯示時...

  • 循環利用標識1,循環利用標志

    循環利用標識1,循環利用標志 相關圖片循環利用標志內1在制作網站時,我們經常需要處理客戶的企業身份。如果你的網站有另一種顏色背景,你需要顛倒客戶提供的商標的白色。當客戶只提供背景為白色的JPG圖像文件時,您...

  • win7正版永久激活密鑰,win7旗艦版最新密鑰

    win7正版永久激活密鑰,win7旗艦版最新密鑰 相關圖片win7旗艦版永久激活Windows 7旗艦的激活碼可以用于windows7旗艦的激活,用戶可以正常使用windows7旗艦的全部功能。與其他激活方法相比,使用Windows 7旗艦w7旗艦版激活碼...

熱評文章

  • win7旗艦版優化設置,win7系統最流暢優化

    win7旗艦版優化設置,win7系統最流暢優化 相關圖片win7設置優化大全很多人在安裝了win7系統之后就開始使用它了。事實上,如果你對win7做了一些設置,你的系統在win7安裝后會更流暢,更省電,更好的使用,你可以清理垃圾和無效的win...

  • 苯磺酸氨氯地平片價格,湖南天雁股吧

    苯磺酸氨氯地平片價格,湖南天雁股吧 相關圖片ST信威在手機撥號界面輸入具體指令,查詢相應的手機信息。有些用戶不知道**Chen 06的用途,所以本文將與您分享**chen06找到的信息是什么?每個手機都有一個世界000760斯太爾股吧...

  • 居中顯示,div居中顯示

    居中顯示,div居中顯示 相關圖片設置表格居中代碼如下:div style=width:1000px;margin:0auto;div style=background color:red;text ali頁碼居中怎么設置...

  • bios硬盤啟動順序,bios設置硬盤啟動

    bios硬盤啟動順序,bios設置硬盤啟動 相關圖片bios設置ssd第一啟動盤許多計算機用戶不知道,當計算機啟動時,他們會從硬盤中尋找啟動文件來啟動系統。如果硬盤不是第一個引導項目,或者有兩個硬盤,系統將無法啟動。有時,有...

  • 交互設計作品集輔導,交互設計作品

    交互設計作品集輔導,交互設計作品 相關圖片北京交互設計作品集培訓斯佩爾(中國設計總監):我想我首先需要了解的是,為什么我們需要一個投資組合來尋找互動設計或其他設計工作。從我采訪各個設計師的經驗來看,作品集...

  • 高通驍龍625怎么樣,驍龍625處理器怎么樣

    高通驍龍625怎么樣,驍龍625處理器怎么樣 相關圖片驍龍660一些入門級手機使用小龍450,這個CPU呢?小龍450是小龍發布的中低端移動SOC,但事實上,沒有一款中端機型會選擇小龍450。450多臺小龍用于小龍450采用驍龍660怎么樣...

  • superamoled屏幕好嗎,ltps和amoled哪個好

    superamoled屏幕好嗎,ltps和amoled哪個好 相關圖片super amoled 手機市場上的一些安卓手機提到,他們在宣傳手機屏幕時使用了超級AMOLED屏幕。超級AMOLED和之前的AMOLED屏幕之間哪一個最好?兩者有什么區別?AMOLED(super amoled屏幕...

  • css搜索框居中,搜索框css

    css搜索框居中,搜索框css 相關圖片css搜索框樣式代碼最終渲染:首先設置一個帶有背景色的公共div框,然后使用上一篇文章中從post獲得的三角形圖標,將div框設置為相對定位模式,將三角形圖標設置為絕對定位,并將位...

  • 證件照編輯,photoshop cc

    證件照編輯,photoshop cc 相關圖片ps導出為png快捷鍵有網友在網上尋找Photoshop CS4的序列號,想激活它。Photoshop CS4軟件具有更直觀的用戶體驗、更大的編輯自由度和大大提高的工作效率photoshop序列號 破解...

  • ui設計師和交互設計師,交互設計師和ui設計師的區別

    ui設計師和交互設計師,交互設計師和ui設計師的區別 相關圖片ui設計和交互設計哪個好2016年,視覺 互動設計師的就業價值將更高。盡管大多數視覺設計師還沒有接受過正式的基本交互訓練,但不用擔心。今天這篇扣人心弦的雜志文章的@虹膜翻譯分...

關注微信

变脸官网查询