标签: opacity

假设我需要在WPF控件上设置不透明蒙板,在高精度位置突出显示它的一部分(假设位于(50; 50)位置的50x50平方).为此,我创建了一个包含2个GeometryDrawing对象的DrawingGroup:1个半透明矩形用于控件的整个实际大小,1个不透明矩形用于突出显示的区域.然后我从这个DrawingGroup创建一个DrawingBrush,将它的Stretch属性设置为None,并将此画笔设置为需要屏蔽的控件的OpacityMask.

所有这一切都很好,而没有任何东西"坚持"超出所述控制的范围.但是如果控制在界限之外绘制某些东西,则外部点将成为应用不透明蒙版的起点(如果画笔与该侧对齐)并且整个蒙版移动该距离会导致意外行为.

我似乎无法找到一种方法来强制从控件的边界应用蒙版或至少获得控件的实际边界(包括粘贴部分),这样我就可以相应地调整我的蒙版.

任何想法高度赞赏!

更新:这是一个简单的测试用例XAML和截图,展示了这个问题:

我们在最后一个中有2个嵌套的Borders和Canvas,带有上面提到的方块:

<Border Padding="20" Background="DarkGray" Width="240" Height="240">
    <Border Background="LightBlue">
        <Canvas>
            <Rectangle Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" 
                       Stroke="Red" StrokeThickness="2" 
                       Fill="White"
                       />
        </Canvas>
    </Border>
</Border>

以下是它的外观:

没有面具http://devblog.ailon.org/devblog/_stuff/maskissue/square-no-mask.gif

现在我们将OpacityMask添加到第二个边框,这样除了我们的方块之外,它的每个部分都是半透明的:

<Border.OpacityMask>
    <DrawingBrush Stretch="None" AlignmentX="Left" AlignmentY="Top">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <GeometryDrawing Brush="#30000000">
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,200,200" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
                <GeometryDrawing Brush="Black">
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="50,50,50,50" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</Border.OpacityMask>

一切看起来都像预期的那样

蒙面的http://devblog.ailon.org/devblog/_stuff/maskissue/square-mask.gif

现在我们在画布上添加一条线,在我们的边框左侧粘贴10个像素:

<Line X1="-10" Y1="150" X2="120" Y2="150"
      Stroke="Red" StrokeThickness="2" 
      />

并且掩码向左移动10个像素:

转移掩码http://devblog.ailon.org/devblog/_stuff/maskissue/square-line-mask.gif

Update2:作为一种解决方法,我在边界外添加一个可笑的大透明矩形并相应地调整我的面具,但这是一个非常讨厌的解决方法.

Update3:注意:带有矩形和直线的画布就像某个对象的例子一样,它有一些超出界限的对象.在此示例的上下文中,它应被视为某种黑盒子.您无法更改其属性来解决一般问题.这与移动线条相同,因此不会突出.

我想为div创建一个线性透明渐变.有没有办法用jquery做到这一点？或者我应该使用像raphaeljs这样的其他库吗？我想达到如下效果:

我有这个简单的CSS ...

div:before {
    content: "G'day";   
    filter: alpha(opacity=40);
    -moz-opacity: .4;
    opacity: .4;
}

jsFiddle.

:before在Firefox 6中,伪元素具有正确的不透明度.在IE8中,不应用不透明度.

通常,在div作品上设置不透明度,但这不是我想要的.

我尝试添加,display: block但没有帮助.

虽然我可以解决这个问题,但是有没有任何技巧可以让IE8 opacity在一个:before(并且:after就此而言)伪元素上获得属性？

找到如何淡出的例子div,当滚动条达到一定的位置在这里.但这不是一个平滑的节流型褪色.这是来自jsfiddle的代码:

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});?

我希望不透明度百分比能够反映滚动条的位置.例如,当滚动条位于最顶部位置时,div不透明度为100%.当我向下滚动35px时,我希望div的不透明度渐渐下降到0%

也许一种技术可能是当div A距离顶部35px时,div B = 100%不透明度.当div A从顶部开始为0px时,div B = 0%不透明度.并且在两者之间的所有阶段都能顺利淡出.

谢谢!

更新:感谢所有帮助他们中的大多数工作相当不错,但我真的需要它在35px范围内工作.所以我创建了一个新的例子,它将非常清楚它应该如何工作.
http://jsfiddle.net/J8XaX/1/

更新2:移动设备:我在我的iPhone上试过这个并且淡入淡出效果不顺畅.它的工作方式是如果你中途滑动并松开手指,那么不透明度就会下降.但是如果你试图平滑滚动它会从100%不透明度直接变为0%不透明度.想知道是否有办法解决这个问题？

谢谢!!

好吧,我有这个问题,我看到有人已经问了类似的东西,但我还不明白.

我想要做的是设置一个元素的不透明度为0.7,但只是内容而不是边框​​,我希望边框保持全彩色.这里有一些示例代码:

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    opacity: 0.8;
}

结果是我的input元素具有不透明度但是甚至是边框,有人可以告诉我如何在内容中设置不透明度而不是边框​​吗？

谢谢.

我一直在玩一些CSS3阴影效果.我非常喜欢"提升的角落"效果,但在尝试为元素添加不透明度时遇到了一个问题.我的问题是:有没有办法在不透明度的元素上创建"提升角"效果？

http://jsfiddle.net/WAvZu/

.drop-shadow{
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after{
    content:"";
    position:absolute;
    z-index:-2;
}
.lifted{
    -moz-border-radius:4px;
    border-radius:4px;
}
.lifted:before,
.lifted:after{
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, …

我想要一个不透明度为0.1的面积图.如果我没有指定颜色,一切正常:

plotOptions: {
    series: {
        fillOpacity: 0.1
    }
}
series: [{
   name: '1',
   data: [1,2,3],
   type: 'area'
}

但是当我更改颜色时,忽略不透明度:

plotOptions: {
    series: {
        fillOpacity: 0.1
    }
}
series: [{
   name: '2',
   data: [0,1,2],
   type: 'area'
   color: 'red'
}

见http://jsfiddle.net/4HkXf/

我在div上添加了一个透明背景,在白色背景上,如下所示:

body {
    background: white;
}

.opaque-white {
    background: rgba(255,255,255,0.95);
    height: 300px;
    width: 300px;
}

<body>

    <div class="opaque-white">
        Area with opaque (opacity: 0.95) background.
    </div>

</body>

JSFiddle链接:http://jsfiddle.net/DvYCA/4/

但由于某种原因,div的颜色显示灰色而不是白色.白色的不透明白色应该显示......白色,对吗？

还是我弄错了？

编辑:我正在添加问题的屏幕截图.这是一个非常微妙的差异,但在某些屏幕上却很明显.要真正了解差异,请尝试使用正确的区域选择图像左侧的颜色.

下面的CSS,施加到一个<a>与一个<div>驻留在个人<tr>▶ <td>在一个元件<table>(与border-collapse和td { padding: 0px; }设定)时,按预期方式工作:

a {
    background-image: url("http://ibin.co/19rwR69EOigr");
    height: 100px;
    width: 120px;
    display: block;
}
div {
    width: 200px;
    box-shadow: #000 0px 0px 13px;
}

如果我对它应用任何不透明度<a>,浏览器的内部分层似乎可怕地破坏.

请注意,即使在第一个示例中,测试图片的最后一个像素也位于<div>s 内box-shadow.(它说opacity = ".99",如果你在图像中看不到它.>.)

这可能是一个渲染错误,已成功蔓延到Firefox 和 Chrome？:P

看看这个JSFiddle打开和关闭的内容.

提前致谢!

我开始学习React Native,对于我的项目,我创建了一个简单的Button组件,可以在我的项目中重用.我根据变量'disabled'动态设置不透明度值,但是,按钮的外观不会随着opacity变量的值而变化.我四处搜索,我没有找到解释..
任何帮助将不胜感激.

这是我的源代码:

import React from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'

//TODO: arrumar o problema com a opacidade
export default function Button({text, onPress, style, disabled, textStyle}) {
    let opacity = disabled === true ? 0.5 : 1
    // console.log('opacity', opacity)
    return (
        <TouchableOpacity onPress={onPress} style={[defaultStyles.button, style, {opacity: opacity}]} 
            disabled={disabled}>
            <Text style={[defaultStyles.text, textStyle]}>{text}</Text>
        </TouchableOpacity>
    )

}

const defaultStyles = StyleSheet.create({
    text: {
        color: 'white'
    },
    button: {
        backgroundColor: 'black',
        margin: 15, …