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