css - 在不透明的纸上渲染拉斐尔元素

Question

我使用 Raphael 2.1.0 ( raphaeljs.com ) 没问题。实际上我在 <div> 上绘制元素与 opacity: 0.6; .很明显，拉斐尔元素具有相同的不透明度。

我想知道是否有任何方法可以在透明纸 (60%) 上渲染不透明元素 (100%)。

Here是一个 JSFiddle 来说明我的事情。

一开始我想的是在透明 <div> 的正上方放一个没有背景的层，这将是我的论文。这样，它就可以为我的 Raphael 元素提供不透明度 (100%)。

但我想我错过了一个更简单的方法。

Answer 1

从你的 fiddle 中，我可以看到你有一个名为 #overlay 的外部 div 和一个名为 # 的 div纸。您正在 #paper 中渲染您的论文并应用 background:white; opacity:0.6; 样式为 #paper 本身。

如您问题的评论中所述，使用 background-color: rgba(255,255,255,0.6); 代替 opacity 是一种选择。但这不适用于 IE 8 及以下版本以及其他浏览器的某些旧版本。

一种更加语义化的方法是在 #paper 之前插入一个高度与 #paper 相同的新 div 并且然后对 #paper 应用负边距，使其位于新插入的 div 之上。

<div id="overlay">
  <div id="paperbg"></div>
  <div id="paper"></div>
</div>

你的 CSS 会像这样

#overlay {
  background: #88bb00;
  height: 400px;
  padding: 10px;
  width: 200px;
}

#paper {
  height: 400px;
  width: 200px;
  margin-top: -400px;
}

#paperbg {
  width: 200px;
  height: 400px;
  background: white;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

更新 fiddle :http://jsfiddle.net/shamasis/AFTQV/8/