”background和border屬性能有什么難的？"

我經(jīng)常聽到新手覺得css的background和border屬性簡單。

那好，我們來看下面這個比較“簡單”的需求：

父元素有一張背景，子元素有邊框，且子元素有一張背景顏色。這時候子元素的背景會呈現(xiàn)出什么樣子？

來，我們來看代碼html結(jié)構(gòu)

<

然后，我們再看css的結(jié)構(gòu)：

.

我準(zhǔn)備了一張圖，作為父元素的背景圖

出于私心，我準(zhǔn)備的是我女神鞠婧祎的配圖

可可愛愛，還有腦袋

好，接下來看看效果

從這張圖我們可以看到，小鞠的圖片只占據(jù)了div的content部分，也就是我紅色框內(nèi)的部分。

如果我們了解標(biāo)準(zhǔn)盒模型的話，我們知道，一個標(biāo)準(zhǔn)盒模型如下：

div = margin+border+padding+content

backgroud-image默認是從content區(qū)域的左上角開始渲染。

到這里就有前端說：“這我知道啊，這有啥好難的嗎？”

好，接下來才是正題。

現(xiàn)在我改變需求，我要求這樣：

現(xiàn)在我們要求父元素有一個背景圖，子元素邊框為半透明

現(xiàn)在，我們開始來寫cssl結(jié)構(gòu)

.child{border:30px solid #fff;max-width: 1000px;max-height:600px;border-color:rgba(0,0,0,0.5); } .father{background-image: url("./jjy.jpg"); } //或者我們用高端一點的寫法吧，色相的hsla函數(shù) .child{border-color:hsla(0,100%,50%，50%) } 四個參數(shù)分別是： 色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數(shù)值。 亮度（L） 取 0-100%，增加亮度，顏色會向白色變化；減少亮度，顏色會向黑色變化。 透明度（A） 取值 0~1 之間， 代表透明度。

我們來看效果

父元素的div會透過子元素的半透明的邊框，理論上講，父元素的background-image是在子元素的下一層，而我們的理想效果是父元素的背景圖不透上來，且保持子元素的邊框呈現(xiàn)出半透明的狀態(tài)

這就是background屬性的工作原理，好，現(xiàn)在我們來恢復(fù)到一個比較簡單的模型下：

<div> </div>css部分 div{background-image: url("./jjy.jpg");background-clip:border-box; //默認值border:30px solid white;border-color:hsla(0,100%,50%，50%);background-clip: padding-box;background-repeat: no-repeat;background-size: 100% 100%; }

在 background-clip的默認值下，border-box是默認從邊框的邊緣開始裁剪的，這樣也就導(dǎo)致了background會入侵標(biāo)準(zhǔn)盒模型的border區(qū)域，

我們可以通過 background-clip屬性，來重新定義background-image從標(biāo)準(zhǔn)盒模型的哪個位置開始裁剪。

取值分別是：

content-box //從content區(qū)域開始裁剪

padding-box //從padding區(qū)域開始裁剪

border-box //從border區(qū)域開始裁剪

總結(jié)

以上是生活随笔為你收集整理的div背景透明_为什么css3实现background-image和半透明边框这么麻烦的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。