text 简单但有效,Opacity SCSS Mixin将应用供应商前缀以改进浏览器支持。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 简单但有效,Opacity SCSS Mixin将应用供应商前缀以改进浏览器支持。相关的知识,希望对你有一定的参考价值。

<div class="card">
  <div class="box sevenfive">75% opacity</div>
  <p>@include opacity(0.75);</p>
  <div class="box twofive">25% opacity</div>
  <p>@include opacity(0.25);</p>
</div>

@mixin opacity($opacity: 0.5) {
  $opacityPercentage: ($opacity * 100);
  filter: alpha(opacity=$opacityPercentage);
  opacity: $opacity;
}

/* mixin usage */
.box.sevenfive {
  @include opacity(0.75);
}
.box.twofive {
  @include opacity(0.25);
}

/* demo styles */
.card {
  margin: 2em auto;
  text-align: center;
}
.box {
  display: inline-block;
  background: #00FFFF;
  padding: .9em 2em 1em;
  font-size: 2rem;
  color: #0080FF;
}
p + .box {
  margin-top: 20px
}

以上是关于text 简单但有效,Opacity SCSS Mixin将应用供应商前缀以改进浏览器支持。的主要内容,如果未能解决你的问题,请参考以下文章

scss Opacity Mixin(SCSS)[...支持IE8]

资源解释为样式表,但使用 MIME 类型 text/x-scss 传输

CSS 透明度怎么设置。 filter:alpha(opacity=10); 我这句话在IE中有效 在其它的浏览器中就没效(Opera)

text 20180320 z-indexの顺序をopacityで変更

scss 简单的媒体查询Sass mixin可以让你考虑像素宽度,但输出是在ems中。

安装scss