6

是否可以在 CSS3 中从纯色和透明色动态制作透明背景？例如：

<div class="red trans1">
CONTENT
</div>

与 CSS

.red {
background: #FF0000;
}
.trans1
background: rgba(255,255,255,0.5);
}

在这种情况下，纯色将完全覆盖透明度。当然，我的意思是使用不同的属性（background,background-color等）。

我有 10 种纯色，并希望为每种颜色创建 10 级透明度。如果为每种颜色单独制作透明色，则需要100个CSS类；例如：

.red1 {
.background: rgba(255,0,0,0.1);
}
.red2 {
.background: rgba(255,0,0,0.2);
}
.red3 {
.background: rgba(255,0,0,0.3);
}
....
.blue1 {
.background: rgba(0,0,255,0.1);
}
.blue2 {
.background: rgba(0,0,255,0.2);
}
.blue3 {
.background: rgba(0,0,255,0.3);
}

我正在寻找一种动态方式来混合纯色和透明背景。

4

2 回答 2

7

纯 CSS

是的，您可以通过创造性地使用伪元素来分离颜色和透明度。例如，这个小提琴演示了以下代码（注意我已经根据:after伪元素安排了所有内容）：

HTML

<div class="opBkg red op10">Red 10%</div>
<div class="opBkg red op50">Red 50%</div>
<div class="opBkg blue op80">Blue 80%</div>

相关CSS

.opBkg {
  position: relative;
}

.opBkg:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.red:after {
  background-color: red;
}
.blue:after {
  background-color: blue;
}
.op10:after {
  opacity: .1;  
}
.op50:after {
  opacity: .5;  
}
.op80:after {
  opacity: .8;  
}

您将有 10 个不透明度规则，无论您想要多少颜色，然后是opBkg用于设置的总体类。

于 2013-01-10T15:59:08.470 回答
3

您将需要明确创建 10 条规则，或者让SASS / Compass等预处理器为您完成。

唯一的其他选择是使用 JavaScript 根据指示透明度程度的某些属性动态设置不透明度。以下使用 jQuery 来完成此操作：

<div class="red" data-opacity=".75"></div>
<div class="red" data-opacity=".50"></div>
<div class="red" data-opacity=".25"></div>

$(".red").css("background-color", function (index, old) {
    var data = { 
        color: old.match(/[0-9, ]+/), 
        alpha: $(this).data("opacity") 
    };
    return "rgba(" + data.color + ", " + data.alpha + ")";
});

小提琴：http: //jsfiddle.net/jonathansampson/WYDJL/

于 2013-01-10T15:44:47.650 回答