資訊專欄INFORMATION COLUMN
摘要：下面都是我自己的理解如果有不對(duì)的地方還請(qǐng)大家?guī)兔χ赋鱿旅媸窃跒g覽器上測(cè)試的和先說(shuō)說(shuō)默認(rèn)的起始位置是外邊緣的左上角如下圖所示但是注意默認(rèn)的結(jié)束位置卻是外邊緣的右下角如下圖所示如果想讓起始位置變?yōu)橥膺吘壍淖笊辖腔蛘邇?nèi)容區(qū)域的左上角這時(shí)就
background-clip 和 background-origin 先說(shuō)說(shuō)background-image下面都是我自己的理解, 如果有不對(duì)的地方, 還請(qǐng)大家?guī)兔χ赋?
下面是在 chrome 瀏覽器上測(cè)試的
background-image 默認(rèn)的起始位置是 padding 外邊緣的左上角. 如下圖所示:
但是注意: 默認(rèn)的結(jié)束位置卻是 border 外邊緣的右下角, 如下圖所示:
如果想讓起始位置變?yōu)?border 外邊緣的左上角, 或者內(nèi)容區(qū)域的左上角, 這時(shí)就是 background-origin 發(fā)揮作用的時(shí)候了.
background-origin它的作用就是改變 background-image 左上角的起始位置.
它有三個(gè)值:
padding-box: 這是它的默認(rèn)值, 指定 background-image 的左上角是 padding 外邊緣的左上角.
border-box: 指定 background-image 的左上角是 border 外邊緣的左上角.
content-box: 指定 background-image 的左上角是 內(nèi)容區(qū)域 的左上角.
background-clip它的作用是指定 background-color 和 background-image 的作用范圍.
它也有三個(gè)值, 和 background-origin 一樣的值.
border-box: 這是它的默認(rèn)值, 表示超出 border 外邊緣的部分將被裁掉. 如下圖:
padding-box: 表示超出 padding 外邊緣的部分將被裁掉. 如下圖:
content-box: 表示超出內(nèi)容區(qū)域范圍的部分將被裁掉. 如下圖:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/49965.html
摘要：當(dāng)然背景圖片默認(rèn)的渲染狀態(tài)是從區(qū)域開(kāi)始渲染的，我們?cè)跊](méi)有確認(rèn)渲染的區(qū)域時(shí)，后期所做的裁剪工作實(shí)際上都是對(duì)照默認(rèn)渲染區(qū)區(qū)域來(lái)進(jìn)行裁剪的。 概念 background-origin: 背景圖片從盒子哪里開(kāi)始渲染background-clip: 背景圖片裁剪到盒子哪里 取值 background-origin: 默認(rèn)值：背景圖片從padding區(qū)域開(kāi)始渲染 boder-box: 背景圖片從邊...
摘要：當(dāng)然背景圖片默認(rèn)的渲染狀態(tài)是從區(qū)域開(kāi)始渲染的，我們?cè)跊](méi)有確認(rèn)渲染的區(qū)域時(shí)，后期所做的裁剪工作實(shí)際上都是對(duì)照默認(rèn)渲染區(qū)區(qū)域來(lái)進(jìn)行裁剪的。 概念 background-origin: 背景圖片從盒子哪里開(kāi)始渲染background-clip: 背景圖片裁剪到盒子哪里 取值 background-origin: 默認(rèn)值：背景圖片從padding區(qū)域開(kāi)始渲染 boder-box: 背景圖片從邊...
摘要：下面都是我自己的理解如果有不對(duì)的地方還請(qǐng)大家?guī)兔χ赋鱿旅媸窃跒g覽器上測(cè)試的和先說(shuō)說(shuō)默認(rèn)的起始位置是外邊緣的左上角如下圖所示但是注意默認(rèn)的結(jié)束位置卻是外邊緣的右下角如下圖所示如果想讓起始位置變?yōu)橥膺吘壍淖笊辖腔蛘邇?nèi)容區(qū)域的左上角這時(shí)就 下面都是我自己的理解, 如果有不對(duì)的地方, 還請(qǐng)大家?guī)兔χ赋?下面是在 chrome 瀏覽器上測(cè)試的 background-clip 和 backgro...
摘要：就目前為止，還沒(méi)有到好玩的地步，只要知道會(huì)蓋在上面，然后如果在后面寫(xiě)半角英文逗號(hào)的話，就可以玩多背景圖了，比如。 background是在CSS中使用率很高的一個(gè)屬性之一，由最初的幾個(gè)簡(jiǎn)單的屬性到現(xiàn)在新增了很多的屬性，比如background-size、background-origin以及background-clip等屬性，還可以設(shè)置多背景來(lái)達(dá)到更多的炫酷效果。 以下要談的...
閱讀 2648·2021-11-24 09:39
閱讀 1648·2021-11-24 09:38
閱讀 629·2021-11-22 14:44
閱讀 1888·2021-11-18 10:02
閱讀 2573·2021-11-18 10:02
閱讀 1158·2021-10-14 09:43
閱讀 4244·2021-09-29 09:35
閱讀 524·2021-07-30 15:30
