CSS3 背景
背景主要包括五個(gè)屬性:
1· background-color( 背景 顏色)
2· background-image( 背景 圖片)
3· background-repeat( 背景 圖片 展示 方式)
4· background-attachment( 背景 圖片 是 固定 還是 滾動(dòng))
5· background-position( 背景 圖片 位置)
可以單獨(dú)寫(xiě), 也可以將這些屬性串在 一起使用。
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括洛陽(yáng)網(wǎng)站建設(shè)、
洛陽(yáng)網(wǎng)站制作、洛陽(yáng)網(wǎng)頁(yè)制作以及洛陽(yáng)網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái),我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,
洛陽(yáng)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到洛陽(yáng)省份的部分城市,未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
- background-color 屬性,用來(lái)設(shè)置元素的背景顏色, 其默認(rèn)值為“ transparent”, 不設(shè)置任何顏×××況下是透明色。
- background-image 屬性,用來(lái)設(shè)置元素的背景圖片, 默認(rèn)值為“ none”,< url> 是指背景圖片的地址, 這個(gè)地址可以是相對(duì)地址, 也可以是絕對(duì)地址。
- background-repeat 屬性,用來(lái)設(shè)置元素背景圖片在元素的盒模型中的鋪放格式, 其默認(rèn)為“ repeat”, 也就是背景圖片沿元素的X軸和Y軸同時(shí)平鋪,“ repeat- x”表示的是元素背景圖片沿元素 的X軸平鋪, Y軸不進(jìn)行任何鋪 放;“ repeat- Y” 剛好相反, 元素背景圖片沿元素的Y軸平鋪, X軸不進(jìn)行任何鋪 放;“ no- repeat”和 默認(rèn)值“ repeat” 相反, 表示背景圖片不做任何鋪放。
- background-attachment 屬性,用來(lái)設(shè)置元素背景圖片是否固定或者隨著頁(yè)面的其余部分滾動(dòng), 其默認(rèn)值為“ scroll”, 表示背景圖片會(huì)隨著瀏覽器滾動(dòng)條一起滾動(dòng), 而取值為“ fixed” 時(shí), 背景圖片固定不動(dòng)。 background-attachment 取值為“ fixed” 時(shí), 一般運(yùn)用在html或 body標(biāo)簽上, 使用在其他標(biāo)簽上不能達(dá)到固定效果。
- background-position 屬性,用來(lái)設(shè)置元素背景圖片的位置, 其默認(rèn)值為( 0,0)||( 0%, 0%)||( lefttop), 其值可以是具體的百分?jǐn)?shù)或數(shù)值設(shè)置( 可以是負(fù)值),也可以使用關(guān)鍵詞left、center、top、right、top、bottom配合設(shè)置,與背景相關(guān)的新增屬關(guān)于background屬性的用法相信很多讀者都已經(jīng)熟悉了。 在CSS3中, background 屬性 依然保持以前的用法, 只是追加了一些與背景相關(guān)的屬性。
1· background- origin: 指定繪制背景圖片的起點(diǎn)。
2· background- clip: 指定背景圖片的顯示范圍。
http:/ /www.iis7.com/b/wzjk/
3· background- break: 指定內(nèi)聯(lián)元素的背景圖片進(jìn)行平鋪時(shí)的循環(huán)方式。
4·background-size:指定背景圖片的尺寸大小,在CSS3中,可以使用background-size屬性來(lái)指定背景圖片的尺寸,可以控制背景圖片在水平和垂直兩個(gè)方向的縮放, 也可以控制圖片拉伸覆蓋 背景區(qū)域的方式, 甚至還可以截取背景圖片。 背景圖片能夠自適應(yīng)元素盒子的大小, 實(shí)現(xiàn)與模塊大小完全適應(yīng)的背景圖片, 避免了因區(qū)塊尺寸不同而需要設(shè)計(jì)不同的背景圖片。
background-size共有五種屬性值,每一種屬性值的作用如下:
-auto: 默認(rèn)值。 將保持背景片的原始高度和寬度。
-<length>: 取具體的整數(shù)值( 例如 px 值), 將改變背景圖片的大小。
-<percentage>:取值為百分值,可以是0%~100%,此時(shí),同樣改變背景圖片的大小,但此值是相對(duì)于元素的寬度來(lái)進(jìn)行計(jì)算,并不是根據(jù)背景圖片的寬度來(lái)進(jìn)行計(jì)算。
-cover: 將背景圖片放大,以適合鋪滿整個(gè)容器。 但這種方法會(huì)致使背景圖片失真。
-contain: 保持背景圖像本身的寬和高比例, 將背景圖像縮放到寬度或高度正好適應(yīng)所定義背景容器的區(qū)域。 當(dāng) background- size 取值為固定數(shù)值( length) 和百分比值( percentage) 時(shí)可以 設(shè)置兩個(gè)值, 也可以設(shè)置一個(gè)值。只取一個(gè)值時(shí), 指定了背景圖片的寬度, 第二個(gè)值相當(dāng)于auto, 也就是指定了高度。 在這種情況下, auto值設(shè)定 之后能夠讓背景圖片的高度自動(dòng)地按照比例縮放。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
本文題目:CSS3背景屬性詳解-創(chuàng)新互聯(lián)
標(biāo)題路徑:http://m.newbst.com/article12/dcihgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、App開(kāi)發(fā)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)