CSS3調(diào)整背景圖片大小的操作代碼
發(fā)布時間：2024-01-19 15:09:53 作者：犬萊八荒 
我要評論
我要評論在CSS3中，如果想要調(diào)整背景圖片的大小可以通過設(shè)置background-size屬性進行設(shè)置，本文給大家介紹CSS3調(diào)整背景圖片大小的操作代碼，感興趣的朋友一起看看吧
在CSS3中，如果想要調(diào)整背景圖片的大小可以通過設(shè)置background-size屬性進行設(shè)置。
一、background-size 語法格式
background-size: length|percentage|cover|contain;
二、參數(shù)詳解
使用的例子背景圖片
1.length
length：設(shè)置背景圖片的高度與寬度。第一個值設(shè)置寬度，第二個值為高度。如果只給出第一個值，那么第二值則設(shè)置為auto（自動）。
舉例，將背景圖片改為20emx20em(默認1px = .05em)
width: 30em;
height: 22em;
background: greenyellow;
background-size:20em 20em;
background-image: url("src/assets/csdn/bg.jpg");
background-repeat: no-repeat;
2.percentage
percentage：將計算相對于背景定位區(qū)域的百分比。第一個值設(shè)置寬度，第二個值為高度，各個值之間以空格 隔開指定高和寬，以逗號 , 隔開指定多重背景。如果只給出一個值，第二個是設(shè)置為auto(自動)。
background-size:80% 70%;
3.cover
cover：保持圖像的橫縱比將圖像縮放成完全覆蓋背景定位區(qū)域的最小大小。
background-size:cover;
4.contain
contain：保持圖像的橫縱比將圖像縮放成適應背景區(qū)域的最大大小。
background-size:contain;
總結(jié)
以上就是css如何改變背景圖片大小的詳細內(nèi)容。。
到此這篇關(guān)于CSS3如何調(diào)整背景圖片大小的文章就介紹到這了,更多相關(guān)CSS3背景圖片大小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了css3實現(xiàn)背景圖片顏色修改的多種方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2021-04-13
CSS3 菱形拼圖實現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能
這篇文章主要介紹了CSS3 菱形拼圖實現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-29CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例
這篇文章主要介紹了CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2021-03-09
前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法，感興趣的朋友跟隨小編一起看看吧2019-11-05
css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性實例演示
這篇文章主要介紹了css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 這篇文章主要介紹了CSS3對背景圖片的裁剪及尺寸和位置的設(shè)定方法,在IE瀏覽器中要注意一下兼容性,需要的朋友可以參考下2016-03-07
- CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術(shù)。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y2014-04-04
- 使用css3 屬性：background-size可以輕松實現(xiàn)像桌面壁紙一樣拉伸，下面為大家詳細介紹下具體的相關(guān)實現(xiàn)過程，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-19
css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08
