摘要:注意點(diǎn)同一個標(biāo)簽可以同時設(shè)置背景顏色和背景圖片,如果顏色和圖片同時存在,那么圖片會覆蓋顏色,但凡給我們的標(biāo)簽設(shè)置了背景圖片以后,我們發(fā)現(xiàn)這個圖片一直在左上角,我如果不想讓它在左上角應(yīng)該怎么辦呢這就要用到我們這節(jié)課的內(nèi)容。
注意點(diǎn):
同一個標(biāo)簽可以同時設(shè)置背景顏色和背景圖片,如果顏色和圖片同時存在,那么圖片會覆蓋顏色,
但凡給我們的標(biāo)簽設(shè)置了背景圖片以后,我們發(fā)現(xiàn)這個圖片一直在左上角,我如果不想讓它在左上角應(yīng)該怎么辦呢?這就要用到我們這節(jié)課的內(nèi)容:background-position。
1.如何控制背景圖片的位置?
在CSS中有一個叫做background-position:屬性,就是專門用于控制背景圖片的位置的
2.格式:
background-position:水平方向? 垂直方向
3.取值:
3.1 具體的方位名詞
水平方向:left? ? center? ? right
垂直方向:top? ? ?center? ? ?bottom
3.2具體的像素
例如:background-position:100px? ?200px;
一定要記住一定要寫單位,也就是一定要寫px
記住具體的像素是可以接收負(fù)數(shù)的,與數(shù)學(xué)不一樣的是,前端中的y軸是向下的,向左是負(fù)數(shù),向上是負(fù)數(shù)。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/2096.html
摘要:我們來看控制背景圖片的位置,在企業(yè)開發(fā)中用在什么地方呢我們打開一個網(wǎng)站,如盛大游戲,保存它的背景圖到本地我們先點(diǎn)擊檢查,查看背景圖的地址然后將地址復(fù)制到地址欄中然后將圖片保存到本地工程的文件夾中然后在網(wǎng)頁中先用打開發(fā)現(xiàn)圖片不能完全顯示,然我們來看控制背景圖片的位置,在企業(yè)開發(fā)中用在什么地方呢?1.我們打開一個網(wǎng)站,如盛大游戲,保存它的背景圖到本地 http://www.sdo.com/ 我們...
摘要:快捷鍵補(bǔ)充到這里屬性基本就講完了,然后我們還有一些的屬性沒有講,但是要用到盒子模型,現(xiàn)在我們沒有學(xué)盒子模型,所以不用講背景圖片和插入圖片區(qū)別我們先來看一個例子如何快速的打出以下代碼鍵現(xiàn)在,我們要分別用背景圖片和插入圖片的方式插入快捷鍵補(bǔ)充: bc? background-color:; bi??background-image:; bgr?background-repeat:; gp??ba...
摘要:如何設(shè)置背景圖片在中有一個叫做的屬性,就是專門用于設(shè)置背景圖片的。1.如何設(shè)置背景圖片? 在css中有一個叫做background-image:url();的屬性,就是專門用于設(shè)置背景圖片的。 注意點(diǎn): 1.圖片的地址必須放在url()中,圖片的地址是本地的地址,也可以是網(wǎng)絡(luò)的地址 2.如果圖片的大小沒有標(biāo)簽的大小大,那么會自動在水平和垂直方向平鋪和填充 3.如果網(wǎng)頁上出現(xiàn)了圖片,那...
摘要:如何控制背景圖片的平鋪方式在中有一個屬性,就是專門用于控制背景圖片的平鋪方式的取值默認(rèn),在水平和垂直都需要平鋪在水平和垂直都不需要平鋪只在水平方向平鋪只在垂直方向平鋪應(yīng)用場景先看原理圖片可以通過背景圖片的平鋪來降低圖片的大小,提升網(wǎng)1.如何控制背景圖片的平鋪方式? 在CSS中有一個background-repeat屬性,就是專門用于控制背景圖片的平鋪方式的 取值: repeat? ?默認(rèn),在...
摘要:如何設(shè)置標(biāo)簽的背景顏色在中有一個屬性,就是專門用來設(shè)置標(biāo)簽的背景顏色的取值具體單詞十六進(jìn)制我們來依次驗(yàn)證一下1.如何設(shè)置標(biāo)簽的背景顏色? 在CSS中有一個background-color:屬性,就是專門用來設(shè)置標(biāo)簽的背景顏色的 取值: 具體單詞 rgb rgba 十六進(jìn)制 我們來依次驗(yàn)證一下
閱讀 1115·2021-11-16 11:42
閱讀 2895·2021-10-12 10:18
閱讀 2854·2021-09-24 09:48
閱讀 3457·2019-08-30 15:56
閱讀 1523·2019-08-30 14:17
閱讀 3036·2019-08-29 12:14
閱讀 902·2019-08-27 10:51
閱讀 2020·2019-08-26 13:28