資訊專欄INFORMATION COLUMN
摘要：下面都是我自己的理解如果有不對的地方還請大家幫忙指出下面是在瀏覽器上測試的和先說說默認的起始位置是外邊緣的左上角如下圖所示但是注意默認的結束位置卻是外邊緣的右下角如下圖所示如果想讓起始位置變為外邊緣的左上角或者內容區域的左上角這時就
background-clip 和 background-origin 先說說background-image下面都是我自己的理解, 如果有不對的地方, 還請大家幫忙指出.
下面是在 chrome 瀏覽器上測試的
background-image 默認的起始位置是 padding 外邊緣的左上角. 如下圖所示:
但是注意: 默認的結束位置卻是 border 外邊緣的右下角, 如下圖所示:
如果想讓起始位置變為 border 外邊緣的左上角, 或者內容區域的左上角, 這時就是 background-origin 發揮作用的時候了.
background-origin它的作用就是改變 background-image 左上角的起始位置.
它有三個值:
padding-box: 這是它的默認值, 指定 background-image 的左上角是 padding 外邊緣的左上角.
border-box: 指定 background-image 的左上角是 border 外邊緣的左上角.
content-box: 指定 background-image 的左上角是 內容區域 的左上角.
background-clip它的作用是指定 background-color 和 background-image 的作用范圍.
它也有三個值, 和 background-origin 一樣的值.
border-box: 這是它的默認值, 表示超出 border 外邊緣的部分將被裁掉. 如下圖:
padding-box: 表示超出 padding 外邊緣的部分將被裁掉. 如下圖:
content-box: 表示超出內容區域范圍的部分將被裁掉. 如下圖:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111395.html
摘要：當然背景圖片默認的渲染狀態是從區域開始渲染的，我們在沒有確認渲染的區域時，后期所做的裁剪工作實際上都是對照默認渲染區區域來進行裁剪的。 概念 background-origin: 背景圖片從盒子哪里開始渲染background-clip: 背景圖片裁剪到盒子哪里 取值 background-origin: 默認值：背景圖片從padding區域開始渲染 boder-box: 背景圖片從邊...
摘要：當然背景圖片默認的渲染狀態是從區域開始渲染的，我們在沒有確認渲染的區域時，后期所做的裁剪工作實際上都是對照默認渲染區區域來進行裁剪的。 概念 background-origin: 背景圖片從盒子哪里開始渲染background-clip: 背景圖片裁剪到盒子哪里 取值 background-origin: 默認值：背景圖片從padding區域開始渲染 boder-box: 背景圖片從邊...
摘要：下面都是我自己的理解如果有不對的地方還請大家幫忙指出下面是在瀏覽器上測試的和先說說默認的起始位置是外邊緣的左上角如下圖所示但是注意默認的結束位置卻是外邊緣的右下角如下圖所示如果想讓起始位置變為外邊緣的左上角或者內容區域的左上角這時就 下面都是我自己的理解, 如果有不對的地方, 還請大家幫忙指出.下面是在 chrome 瀏覽器上測試的 background-clip 和 backgro...
摘要：就目前為止，還沒有到好玩的地步，只要知道會蓋在上面，然后如果在后面寫半角英文逗號的話，就可以玩多背景圖了，比如。 background是在CSS中使用率很高的一個屬性之一，由最初的幾個簡單的屬性到現在新增了很多的屬性，比如background-size、background-origin以及background-clip等屬性，還可以設置多背景來達到更多的炫酷效果。 以下要談的...
閱讀 1121·2023-04-26 02:46
閱讀 624·2023-04-25 19:38
閱讀 639·2021-10-14 09:42
閱讀 1234·2021-09-08 09:36
閱讀 1354·2019-08-30 15:44
閱讀 1319·2019-08-29 17:23
閱讀 2237·2019-08-29 15:27
閱讀 801·2019-08-29 14:15
