CSS教你玩轉(zhuǎn)背景background-position（1）

xiguadada 發(fā)布于2019-08-22 10:53 / 2381人閱讀

摘要：在頁面構(gòu)建時(shí)，剛?cè)腴T的前端小獅子們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了首先決定背景圖的有如下屬性屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我

在HTML頁面構(gòu)建時(shí)，剛?cè)腴T的前端小獅子?? 們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了～

首先決定背景圖的有如下屬性：

background-image:url(images/recovery/Tips_bg.jpg);

background-size:length|percentage|cover|contain;

size屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我們既可以直接設(shè)置背景圖的大小，比如100px 100px，等來控制大小，還可以設(shè)置對(duì)于容器的百分比來控制背景圖片的大小，還有兩種特殊的模式：cover&contain；

background-position是用來控制位置

如果你想讓一個(gè)banner圖1080p時(shí)是這樣

而小屏?xí)r是這樣

怎么辦？好說：直接設(shè)background-posiiton：center top 就哦了，他會(huì)讓背景圖從最中間鋪開，再也不用擔(dān)心錯(cuò)位的問題了，想要什么樣式的，什么模式的背景圖，都可以組合試一下，保證玩轉(zhuǎn)～2333

云服務(wù)器 GPU云服務(wù)器教你玩轉(zhuǎn)html5 你玩教你用教你選擇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/91394.html

相關(guān)文章

CSS教你玩轉(zhuǎn)背景background-position（1）

摘要：在頁面構(gòu)建時(shí)，剛?cè)腴T的前端小獅子們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了首先決定背景圖的有如下屬性屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我在HTML頁面構(gòu)建時(shí)，剛?cè)腴T的前端小獅子?? 們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又...

tyheist 2019-08-02 15:57 評(píng)論0 收藏0
CSS教你玩轉(zhuǎn)背景background-position（1）

摘要：在頁面構(gòu)建時(shí)，剛?cè)腴T的前端小獅子們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了首先決定背景圖的有如下屬性屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我在HTML頁面構(gòu)建時(shí)，剛?cè)腴T的前端小獅子?? 們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又...

jay_tian 2019-08-29 13:09 評(píng)論0 收藏0
視頻來啦 | 手把手教你玩轉(zhuǎn)數(shù)人云容器管理面板Crane

摘要：數(shù)人云容器管理面板已經(jīng)開源一個(gè)月多啦，經(jīng)歷了新版本的發(fā)布，完善了許多功能和體驗(yàn)。今天小數(shù)給小伙伴們帶來的是數(shù)人云總架構(gòu)師為大家錄制的使用視頻。歡迎掃碼下方二維碼來交流群進(jìn)行技術(shù)交流數(shù)人云容器管理面板Crane已經(jīng)開源一個(gè)月多啦，經(jīng)歷了新版本v1.0.5的發(fā)布，完善了許多功能和體驗(yàn)。今天小數(shù)給小伙伴們帶來的是數(shù)人云總架構(gòu)師為大家錄制的Crane使用視頻。從安裝到使用，step by s...

brianway 2019-06-28 15:26 評(píng)論0 收藏0
7天教你玩轉(zhuǎn)云服務(wù)器

摘要：教學(xué)課程如何玩轉(zhuǎn)云服務(wù)器云服務(wù)器是一種簡(jiǎn)單高效安全可靠處理能力可彈性伸縮的計(jì)算服務(wù)。用戶無需提前購買硬件，即可迅速創(chuàng)建或釋放任意多臺(tái)云服務(wù)器。云服務(wù)器租用產(chǎn)品送產(chǎn)權(quán)嗎不送產(chǎn)權(quán)。教學(xué)課程：如何玩轉(zhuǎn)云服務(wù)器云服務(wù)器是一種簡(jiǎn)單高效、安全可靠、處理能力可彈性伸縮的計(jì)算服務(wù)。其管理方式比物理服務(wù)器更簡(jiǎn)單高效。用戶無需提前購買硬件，即可迅速創(chuàng)建或釋放任意多臺(tái)云服務(wù)器。云服務(wù)器幫助您快速構(gòu)建更穩(wěn)定、安全...

Labradors 2019-04-24 19:26 評(píng)論0 收藏0