div背景透明_为什么css3实现background-image和半透明边框这么麻烦

”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区域开始裁剪