css transparent的应用

发表于 | 分类于

transparent

transparent 的字面意思就是透明。它用来表示一个完全透明的颜色，即该颜色看上去将是背景色。
也可以理解为它是 rgba(0,0,0,0) 的简写。

值得注意的是:

在 CSS3 之前，transparent 关键字不是一个真实的颜色，只能用于 background-color 和 border-color中，表示一个透明的颜色。而在支持 CSS3 的浏览器中，它被重新定义为一个真实的颜色，transparent 可以用于任何需要 color 值的地方，像 color 属性。
那么这个透明值有什么用呢？简单列举一些例子：

transparent 用于 border，绘制三角形

这算是 transparent 最常见的一个用法，用于绘制三角形。

1
2
<div class='div1'></div>
<div class='div2'></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.div1{
  width:0px;
  height:0px;
  margin:20px auto;
  border-top:50px solid yellowgreen;
  border-bottom:50px solid deeppink;
  border-left:50px solid bisque;
  border-right:50px solid chocolate;
}
.div2{
  width:0px;
  height:0px;
  margin:20px auto;
  border-bottom:50px solid deeppink;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}
transparent1.png

transparent 用于 border，实现增大点击热区

按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验，尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？

这里，借助透明的 border 可以轻松帮我们实现，利用一层透明的 border:20px solid transparent 我们可以这样写：

1
<div>Btn</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div{
  width:140px;line-height:48px;
  text-align:center;
  margin:50px auto;
  color:#333;
  cursor:pointer;
  background:hsl(200, 60%, 60%);
  border:20px solid transparent;
  background-clip: padding-box;
}
div:hover{
  background:hsl(100, 60%, 50%);
  background-clip: padding-box;
}
div:active{
  background:hsl(300, 60%, 70%);
  background-clip: padding-box;
}
transparent2.png

然而真实情况是有的时候我们的按钮必须要用到 border，而 border 又只能设置一重（无法像 box-shadow和 渐变一样设置多重 border），这个时候如果还需要运用这种方法，可以使用内阴影 box-shadow 模拟一层 border，像这样：

1
<div>Btn</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div{
  width:140px;
  line-height:48px;
  text-align:center;
  margin:50px auto;
  color:hsla(328, 100%, 54%,0.8);
  cursor:pointer;
  border:20px solid transparent;
  background-clip: padding-box;
  box-shadow:inset 0 0 0 1px hsla(328, 100%, 54%,0.8);
}
div:hover{
  background:hsla(328, 100%, 54%,0.8);
  color:white;
  background-clip: padding-box;
}
div:active{
  background:hsla(328, 100%, 54%,1);
  color:white;
  background-clip: padding-box;
}
transparent3.png