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

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

html把div做成透明背景,网页设计div背景透明
HTML如何给背景颜色设置透明度问题分析: HTML的标签可以使用CSS的background-color来设置背景颜色以及透明度. 举例如下: 以下示例将分别演示不透明.50%透明度以及20%透明 ...
div背景图片完整填充样式设置---background、background-size、background-attachment
<div>图片</div> <style> div{ background: url(images/images/bg.jpg) no-repeat; b ...
IE7 中 div 背景透明的问题
<!DOCTYPE html> <html> <div style="filter:alpha(opacity:20);opacity:0.2;backgrou ...
div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解 ...
vc6 设置静态文本框透明_微信还能这么玩？半透明的微信背景主题用起来！
平时就喜欢捣鼓琢磨些壁纸.主题啥的,算是个小资深的手机控,这两天看到朋友设置了酷炫的透明的还自带音乐的微信背景,我作为手机达人,怎么可以输!这不立马就安排上了! 试用两天的感受来说,微信动态主题背景是 ...
python绘图背景透明_如何在 Matplotlib 中更改绘图背景
介绍Matplotlib是Python中使用最广泛的数据可视化库之一.无论是简单还是复杂的可视化项目,它都是大多数人的首选库.在本教程中,我们将研究如何在Matplotlib中更改绘图的背景.导入数据 ...
python png 背景透明_去除白色背景得到透明背景png的示例代码
[实例简介] 去除图像中的白色背景,得到透明背景的保留主体的png图像的python代码: [实例截图] 原图去除白色背景后得到的图片 [核心代码] def remove_white_bg(img_ ...
div背景透明文字不透明
style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5); ...
html制作透明正方形,用css3简单的制作3d半透明立方体图片详解
new document //css部分 html{ font-size:62.5%; } img{ width:300px; height:300px; } #stage{ //搭建一个舞台 mar ...

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

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

最新文章

热门文章