小编Tso*_*loy的帖子

使用 HTML 和 CSS 在剪辑路径上添加不透明度

我想在剪辑路径/剪辑(剪辑路径覆盖的区域)上添加不透明度,如下图所示。

结果

下面是我的代码

.item--clip .demo {
  width: 200px;
  height: 250px;
}

.item--clip .has-mask {
  position: absolute;
  clip: rect(10px, 190px, 190px, 10px);
}


/* Common ------------------------------------------- */

.item {
  position: relative;
  margin-bottom: 2em;
  padding-bottom: 2em;
  padding-right: 3em;
  border-bottom: 1px solid #DDD;
  /* counter-increment: mylist; */
}

.item::before {
  /* // content: counter(mylist); */
  position: absolute;
  right: 0;
  top: 0;
  font: 2rem/1 Georgia, serif;
  color: #EEE;
}

.item::after {
  content: '';
  display: table;
  width: 100%;
}

.demo {
  position: relative;
  float: left;
  margin-right: …
Run Code Online (Sandbox Code Playgroud)

html css vue.js

5
推荐指数
1
解决办法
147
查看次数

标签 统计

css ×1

html ×1

vue.js ×1