CSS篇：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。

最新推荐文章于 2022-07-12 22:41:48 发布

 梦晓天明

最新推荐文章于 2022-07-12 22:41:48 发布

阅读量1.9k

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/tigerwxm630/article/details/107127106

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

例如：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。

效果如图：
在这里插入图片描述
第一步，将网页背景颜色设置为红色，绘制一个矩形，并设置边框的颜色为半透明白色边框。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=<div class="board">
	<title>Document</title>
</head>
<body style="background: red;">
  <div class='div'></div>
</body>
<style>
	.div{
		width:300px;
		height:200px;
		background: white;
		border: 10px solid hsla(0,0%,100%,.5)
	}
</style>

这时我们看到的效果如下图所示：
在这里插入图片描述
显示结果令人疑惑：边框哪去了？
尽管我们看不到边框，但是边框是真实存在的，只是在上面的例子中，我们所做的事情并没有让body的背景从半透明白色边框处透上来，而是在在半透明白色边框处透出了这个容器自己的纯白实色背景，实际上得到的效果跟纯白实色的边框看起来完全一样。
解决方案
通过 background-clip 属性来调整上述默认行为所带来的不便。
知识点：background-clip

定义和用法：
- 设置元素的背景是否在其边框框、填充框或内容框下扩展
- 如果元素没有背景-图像或背景-颜色，这个属性只有在边界有透明区域或部分不透明区域(由于边界-样式或边界-图像)时才会有视觉效果;否则，边框将掩盖差异。
语法：background-clip: border-box|padding-box|content-box|initial|inherit;
属性值：
- border-box：背景延伸到边界的外侧
- padding-box：背景延伸到边界的内边缘
- content-box：背景延伸到内容框的边缘
- initial：将此属性设置为其默认值。
- inherit：从其父元素继承此属性。.

修改代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=<div class="board">
  <title>Document</title>
</head>
<body style="background: red;">
  <div class='div'></div>
</body>
<style>
  .div{
    width:300px;
    height:200px;
    background: white;
    border: 10px solid hsla(0,0%,100%,.5);
    background-clip:padding-box;
  }
</style>

显示效果：
在这里插入图片描述

RGBA和HSLA

CSS支持140种颜色名称，HEX值，RGB值、RGBA值，HSL值，HSLA值和不透明度。

RGBA颜色
- RGBA颜色值是具有alpha通道的RGB颜色值的扩展-它指定了颜色的不透明度。
- RGBA颜色值指定为：rgba（红色，绿色，蓝色，alpha）。
- alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。
HSL颜色
- HSL代表色相，饱和度和亮度。
- HSL颜色值指定为：hsl（色相，饱和度，亮度）。
- 色相是色轮上的度（从0到360）：
  - 0（或360）为红色
  - 120是绿色
  - 240是蓝色
- 饱和度是一个百分比值：100％是全色。
- 亮度也是一个百分比；0％是深色（黑色），而100％是白色。
HSLA颜色
- HSLA颜色值是带有Alpha通道的HSL颜色值的扩展-它指定了颜色的不透明度。
- HSLA颜色值由以下参数指定：hsla（色相，饱和度，明度，alpha）
- alpha参数定义不透明度。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。
不透明度
- CSS opacity属性设置整个元素的不透明度（背景颜色和文本都是不透明/透明的）
- 该opacity属性值必须是介于0.0（完全透明）和1.0（完全不透明）之间的数字。
- 例如：background-color:rgb(255,0,0);opacity:0.6;

 梦晓天明

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS篇：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。

例如：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。效果如图：第一步，将网页背景颜色设置为红色，绘制一个矩形，并设置边框的颜色为半透明白色边框。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<div class="board"> &.
复制链接

扫一扫

专栏目录