标签: opacity

我正在尝试将OpacityMask属性与VisualBrush结合使用,以便当您将图像拖到另一个控件(例如另一个图像,矩形或任何其他控件)上时,第二个控件上方的图像部分具有不同的不透明度.也就是说,图像具有一些非零的基础不透明度,并且图像的任何位于另一个控件上的部分具有不同的(再次,非零)不透明度.

这可以简单地使用VisualBrush和OpacityMask吗？或者需要更复杂的方法？

谢谢!

编辑:我正在尝试使图像具有较低的不透明度(例如0.5),并且在控件上拖动的部分具有较高的不透明度(例如1.0).我最初忽略了这个细节,这对采取的方法很重要.

有没有办法让WPF窗口透明而不会丢失非客户区域(边框,标题栏,关闭/最小化/最大化按钮)？

将"AllowTransparency"设置为"true"需要将"WindowStyle"设置为"None"(如本答案中所述),这将删除非客户区域.

其中一位WPF开发人员发表了关于透明窗口如何在WPF中工作的博客,以及为什么难以实现对非客户区域透明度的支持.

无论您的窗口样式如何建议,透明的WPF窗口都没有任何可见的非客户区域.这适用于许多场景,其目的是创建自定义窗口形状,但对于只想"淡入"普通窗口的人来说这可能很烦人.

因此,仅WPF解决方案似乎是不可能的.

调用本机SetLayeredWindowAttributes函数并传递WPF窗口的句柄和LWA_ALPHA没有效果,如预期的那样.

我能想到的唯一其他方法是在Win32(或可能是WinForms)窗口中托管WPF内容.但我怀疑试图这样做会导致空域问题.

WPF分层窗口在不同的操作系统上具有不同的功能...... WPF不支持透明度颜色键,因为WPF无法保证呈现您请求的确切颜色,特别是在渲染是硬件加速时.

我不确定我是否正确阅读上述内容,但听起来好像试图托管具有透明度的WPF内容是不可能的.

有任何想法吗？

我有一个32位的PNG,代表一个透明正方形中间的蓝色方块.下面,我用3个不同的不透明度值显示了这个蓝色方块:

从左到右,不透明度分别为1,0.5和0.1,如您所见(如果不能,只相信您的Photoshop吸管),蓝色方块周围的区域仅在左侧图像上是透明的.

这是与颜色值相同的图像:

我知道它几乎看不见但我想知道是什么原因造成的.再加上一些图像和背景,对比度更加明显.

谢谢!

编辑:这是我的VS解决方案,适合那些想在家里试用的人:http://www.mediafire.com/？gt704e62d53z7ae

我怎样才能这样做,当你向下滚动页面时,下一个DIV会在之前的顶部消失？

我已经设置了这个小提琴来更好地说明它:http://jsfiddle.net/meEf4/176/
因此,例如,如果你在页面中间,背景为蓝色.

编辑:这是jsFiddle的内容,如果爆炸,有人遇到类似的问题.

<style>
html, body, #red, #green, #blue { height: 100%}
#container { height: 300%}
#red, #green, #blue { 
    position: fixed; 
    top: 0; 
    width: 100%;
}
#red { background:red; z-index: 5}
#blue { background:blue; z-index: 4}
#green { background:green; z-index: 3}?    
</style>

<div id="container">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
</div>?

我有一个位于iframe上的元素(bar),如果我在该元素上设置不透明度,它会保留在iframe下,即使该项具有比iframe更大的z-index.

但是,如果我在该元素和iframe周围创建一个容器(foo),并在那里设置不透明度,则(bar)元素会像预期一样停留在iframe前面.

CSS:

#bar {
    width:100px; 
    opacity:0.5;
    height: 150px; 
    position:relative; 
    top:100px; 
    z-index:2; 
    background:red
}

#foo {
  /* opacity:0.5; */ 
}

HTML

<div id="foo">
    <div id="bar">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>

    <iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>

创建该容器将解决我的问题,但我不能这样做,因为我当前的标记不允许它.我需要不透明度留在条形元素.

这只发生在Firefox中,iframe的内容是.pdf文件.

如何在保持其不透明度设置的同时让条形元素保持在iframe的顶部？

在这里小提琴

更新:

似乎问题与我在iframe中采购pdf文件而不是网页这一事实有关.

更新小提琴

提前致谢

我试图得到一个黑色div的不透明度为.5但div(h3标签)的内容是不透明的1.所以白色文本仍然是白色的,它的不透明度没有改变/未触及.

<div style="background-color:red;">
<div style="width:470px;color:white;margin-top:170px;">
<div style="background-color:black;opacity:0.5;">
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p>
</div>
</div>
</div>

的jsfiddle

任何建议非常感谢.

试图用css3动画连续闪现三个元素.我已经运行了,但每帧都有淡入淡出,我想将其删除.理想情况下,每个元素保持可见1秒,然后立即隐藏.

我试过设置与帧动画0%并99%为opacity:1与100%对opacity: 0,但仍然没有运气.

我希望有一种方法可以消除褪色!

webkit js小提琴

CSS:

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
}
    .frame:nth-of-type(2) {
        -webkit-animation-delay: 1s;
    }
    .frame:nth-of-type(3) {
        -webkit-animation-delay: 2s;
    }

    @-webkit-keyframes flash {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

假设我有两个直方图,并使用hist参数设置不透明度:'alpha = 0.5'

我已经绘制了两个直方图但我得到了三种颜色!从不透明的角度来看,我理解这是有道理的.

但!向某人展示三种颜色的两件事的图表是非常令人困惑的.我可以以某种方式将每个箱子的最小条形设置在前面而没有不透明度吗？

示例图

我很难弄乱UIView的属性来以编程方式实现所需的不透明外观,这可以通过Storyboard和Attributes Inspector轻松完成.

我要重新创建的内容(属性检查器的设置):背景颜色为(RGB滑块:0,0,0)和不透明度滑块设置为75%的UIView,alpha默认为1.所以基本上是黑色的UIView不透明度降低了.

我以编程方式尝试过:

1)  view.backgroundColor = .black
    view.alpha = 0.75

2)  view.backgroundColor = UIColor.black.withAlphaComponent(0.75)
    view.isOpaque = true

随附的是在故事板中选择的UIView的图片,其中包含您可以看到的设置.如果您需要更多信息,请随时告诉我.非常感谢你的帮助.

更新:感谢您的所有意见.Clever Error对视图层和Matt代码的解释的组合使我能够实现我想要的外观.

期望的UI外观!

我一直在尝试在包含css不透明度转换实例的页面上使用混合混合模式.似乎正在发生的事情是包含混合混合模式的div在转换期间没有混合模式时显示,或者更确切地说,在动画正在进行时显示.我发现它只是Chrome中的一个问题.

在我的示例中,div正在将混合模式显示正确地转换为图像而不是页面背景.转换完成后,它会返回到应该显示的状态.换句话说,混合的div在黑色背景上显示为纯黄色,而动画正在进行中,但由于它设置为变暗,因此它应该在黑色背景上不可见.动画完成后,它应该显示出来.它在图像上显得正常.

我试过这是Firefox和Safari,似乎没有问题.

笔:http://codepen.io/anon/pen/QGGVOX

编辑 - 我发现了另一个不涉及任何动画的实例.奇怪的是,当一个div的位置设置为固定而另一个是绝对位置时,会发生这种情况,请参见此处:http://codepen.io/anon/pen/wooRME如果div .image的位置更改为绝对,则混合-mode看起来很正常.

body {
background: #000;
}

.blend {
  height: 650px;
  width: 50%;
  background-color: yellow;
  mix-blend-mode: darken;
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0px;
  z-index: 100;
}

img {
  position: relative;
  z-index: 0;
}