标签: opacity
CSS 中的“负”文本？
我想知道是否可以用简单的 css 创建如附图所示的效果。下一个最佳选择是什么？提前致谢！
推荐指数
解决办法
查看次数
如何去除透明色（不透明度）
我有以下代码：
html...
<div id="solidcolor">
<div class="transcolor">transcolor
<div class="notranscolor">some text</div>
</div>
</div>
CSS..
#solidcolor{
background: url("http://i45.tinypic.com/o5aycp.gif") repeat;
width: 200px;
height: 200px;
}
.transcolor{
background: blue;
opacity: 0.4;
height: 100px;
}
.notranscolor{
background: red; /* I want this color to solid color not transparent color*/
}
编辑注释我无法使用 rgba() 方法来设置它的背景颜色，因为我必须设置线性渐变颜色。
编辑1
即使应用绝对定位后，我也无法得到正确的解决方案。但下一个想法我想用 calc() 方法来执行此操作，但它不会退出。任何想法？
编辑2
正如@rokburgar 所说的答案，即使应用绝对位置后我也无法解决我的问题。但我想将不透明度设置为 1.25 我知道这应该是 0 到 1 但他已经声明 0.4 * 1.0 = 0.4 像这样 0.8 * 1.25 = 1 那么为什么它不起作用？
推荐指数
解决办法
查看次数
计算图层的不透明度总和
我正在尝试使用 CSS 动画创建一个“AJAX-spinner”。
我有两个不透明度为 70% 的图层，有时会重叠。这些层具有相同的颜色。当图层完全重叠时，我想用单个图层替换它们。
我认为两层重叠会导致完全不透明的层，毕竟 70 + 70 是 140。但这显然不是不透明度的工作原理。两层重叠仍然是透明的，我不知道如何透明。
我唯一能找到的方法是计算结果颜色，但这不是我感兴趣的。我怎样才能找到结果的不透明度？
.layer1,
.layer2 {
color: orange;
opacity: .7;
}
.layer3 {
color: orange;
opacity: ??;
}
更新
小提琴来说明问题：http://jsfiddle.net/m8zEX/3/
您可以看到两个橙色方块重叠，以及颜色如何与后面的黑色方块混合。
推荐指数
解决办法
查看次数
Chrome 文本在不透明度过渡时变得模糊
好吧，chrome 上文本模糊的好问题。
我正在创建一个 CSS 下拉菜单，可以在 和 之间切换，visibility: hidden并且文本opacity: 0会稍微模糊。visibility: visibleopacity: 1
Firefox 上不存在此问题。那里的文字很清晰。
你可以看到小提琴：http://jsfiddle.net/swum8rm7/1/
通过删除第 21 行上的过渡，您会发现文本变得清晰。我尝试了各种translateZ诡计backface，但无法让它正常工作。
推荐指数
解决办法
查看次数
VTK：设置透明渲染器背景
我可以通过调用来定义渲染器的背景颜色
renderer = vtk.vtkRenderer()
renderer.SetBackground(0,255,0)
[![在此处输入图像描述][1]][1]
我的问题：
可以设置背景的不透明度吗？
您可以在我的示例图像中看到我的问题（具有多个视口）。我可以通过简单地使用透明背景来摆脱这种“切割”......
提前致谢！
推荐指数
解决办法
查看次数
灰度到黑色不透明度的转换
我发现了
color: rgb(51, 51, 51);
和
color: #333333;
和
color: black; opacity: 0.8;
都产生相同的灰色阴影。
我该如何概括这一点？
换句话说，给定任意 RGB 或 HEX 颜色/灰色阴影，我如何确定opacitywhen的等效值color: black;？
<style>
div {
font-family: sans-serif;
font-size: 48px;
margin: 20px;
padding: 60px;
}
.rgb {
color: rgb(51, 51, 51); /* given this value... */
}
.hex {
color: #333333; /* ...or given this value */
}
.opacity {
color: black;
opacity: 0.8; /* how can I determine this value? */
}
<style>
<body> …推荐指数
解决办法
查看次数
react-dom：点击时增量更改元素的不透明度
我希望能够通过单击按钮来增加 DOM 元素的不透明度。
围绕 React 的概念，我认为这应该通过使用state和函数来完成setState()。
但是，我不断遇到以下代码的错误：
import React, { Component } from 'react'
class ThoughtfulThoughts extends Component {
state = {
opacity: 0.4,
thoughts:
[
"live and let leave",
"just pee yourself",
"who knows what 'laf' is?"
]
}
makeAppear = () => {
// TODO: this causes a "RangeError: Maximum call stack size exceeded"
this.setState(prevState => ({
opacity: prevState.opacity + 0.2
}))
}
render() {
return (
<div className="thoughtful-thoughts">
<div className="current-thought" style={{opacity: …推荐指数
解决办法
查看次数
div 中的不同不透明度元素
我需要更改 div 中元素的不透明度，使其比父元素的不透明度更高。在没有预处理器的情况下，如何提供.solid完全不透明度 ( ="1")？
.half-faded {
opacity:0.3;
border:1px solid black;
width:200px;
display:flex;
justify-content:space-around;
}
.solid {
opacity:1; /* doesn't help */
opacity:2; /* twice doesn't help */
}<div class="half-faded">
<span class="one">One</span>
<span class="two">Two</span>
<span class="solid">Solid</span>
<span class="four">Four</span>
</div>推荐指数
解决办法
查看次数
触发单选按钮的选中选择器时是否可以更改 CSS 变量？
我有以下 CodePen: Test LCD with CSS Variables，在其中单击具有特定数字的标签时，会根据我确定模拟 BCD 到 7 段显示解码器的代数方程使适当的 LCD 段“点亮” ，为了模拟液晶显示器...
我目前有 CSS 中提到的第一段方程。单击 CSS 中的一个数字理论上应该会导致--input用脉冲（0 或 1）填充适当的四个变量，然后该等式根据该段的等式确定不透明度...
段 A（顶部段）应更改如下：
- 0：开
- 1：关闭
- 2：开
- 3：开
- 4：关闭
- 5：开
- 6：开
- 7：开
- 8：开
- 9：开
其中“on”的不透明度为 1，“off”的不透明度为 0.05。
然而，即使我们的初始默认值为 0（开启），点击比如说 1 或 4，也不会改变段不透明度......
代码如下，谁能指出我可能做错了什么？提前谢谢了...
HTML：
<div id="led-screen">
<div class="digit">
<div class="segment segment-a"></div>
<div class="segment segment-b"></div>
<div class="segment segment-c"></div>
<div class="segment segment-d"></div>
<div class="segment segment-e"></div>
<div class="segment segment-f"></div>
<div class="segment segment-g"></div>
</div>
</div>
<div id="buttons">
<label class="digit-button" for="digit-7">7</label>
<label class="digit-button" …推荐指数
解决办法
查看次数
CSS 线性渐变和画布线性渐变与不透明度设置不同
我想在画布上实现由 CSS 定义的相同线性渐变外观。使用了一种在不使用透明度设置之前效果很好的方法。当使用相同的线性渐变颜色设置定义了 rgba 颜色值时，结果看起来不一样，请参阅以下链接：
JSFiddle: 例子
var canvas = document.getElementById("myCanvas");
var ctx = document.getElementById("myCanvas").getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cssAng = Math.PI;
var dir = getDir(cssAng, w, h);
var gr = ctx.createLinearGradient(dir.x0,dir.y0,dir.x1,dir.y1);
gr.addColorStop(0, "rgb(255, 255, 255, 0)");
gr.addColorStop(0.87, "rgb(0, 0, 0, 1)");
ctx.fillStyle = gr;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
function getDir(radian, width, height) {
radian += Math.PI;
const HALF_WIDTH = width * 0.5;
const HALF_HEIGHT = height * 0.5;
const lineLength = Math.abs(width * Math.sin(radian)) …推荐指数
解决办法
查看次数