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