滨州网站建设腾度,中文去掉wordpress,太原做网站页面的,网站优化推广费用”background和border属性能有什么难的#xff1f;我经常听到新手觉得css的background和border属性简单。那好#xff0c;我们来看下面这个比较“简单”的需求#xff1a;父元素有一张背景#xff0c;子元素有边框#xff0c;且子元素有一张背景颜色。这时候子元素的…”background和border属性能有什么难的我经常听到新手觉得css的background和border属性简单。那好我们来看下面这个比较“简单”的需求父元素有一张背景子元素有边框且子元素有一张背景颜色。这时候子元素的背景会呈现出什么样子来我们来看代码html结构然后我们再看css的结构.我准备了一张图作为父元素的背景图出于私心我准备的是我女神鞠婧祎的配图可可爱爱还有脑袋好接下来看看效果从这张图我们可以看到小鞠的图片只占据了div的content部分也就是我红色框内的部分。如果我们了解标准盒模型的话我们知道一个标准盒模型如下div marginborderpaddingcontentbackgroud-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
/divcss部分
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区域开始裁剪
