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

我經常聽到新手覺得css的background和border屬性簡單。

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

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

來，我們來看代碼html結構

<

然后，我們再看css的結構：

.

我準備了一張圖，作為父元素的背景圖

出于私心，我準備的是我女神鞠婧祎的配圖

可可愛愛，還有腦袋

好，接下來看看效果

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

如果我們了解標準盒模型的話，我們知道，一個標準盒模型如下：

div = margin+border+padding+content

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

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

好，接下來才是正題。

現在我改變需求，我要求這樣：

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

現在，我們開始來寫cssl結構

.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函數 .child{border-color:hsla(0,100%,50%，50%) } 四個參數分別是： 色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數值。 亮度（L） 取 0-100%，增加亮度，顏色會向白色變化；減少亮度，顏色會向黑色變化。 透明度（A） 取值 0~1 之間， 代表透明度。

我們來看效果

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

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

<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是默認從邊框的邊緣開始裁剪的，這樣也就導致了background會入侵標準盒模型的border區域，

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

取值分別是：

content-box //從content區域開始裁剪

padding-box //從padding區域開始裁剪

border-box //從border區域開始裁剪

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。