标签: opacity

我想创建一个CALayer动画,给人一种"华而不实"的效果.为此,我试图动画"不透明"属性,但我的问题是我不知道从哪里开始以及如何做到这一点.

以下是动画的图形说明:

opacity
   |    ___
1  |   |   |
   |   |   |    * repeatCount
0  |___|   |_ . . .
   -------------------------> time
    |______|
    duration

不透明度从0开始,然后动画为1,然后再次为0(此0到1到0的动画需要等于持续时间的秒数).然后这个过程重复'repeatCount'次.

以下是代码的一些背景知识:

float duration = ...; // 0.2 secs, 1 sec, 3 secs, etc
int repeactCount = ...; // 1, 2, 5, 6, ect

CALayer* layer = ...; // I have a CALayer from another part of the code
layer.opacity = 0;

// Animation here

done = YES; // IN THE END of the animation set …

我试图在图像上叠加标题 - 图像以较低的不透明度变暗.但是,不透明效果也会改变叠加文本 - 使其变暗.有什么解决方法吗？这是看起来像:

这是我的自定义组件的代码(文章预览 - 上面的图像是一行文章预览组件):

//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var {
  View, 
  StyleSheet, 
  Text, 
  Image, 
  TouchableHighlight, 
} = React;

//dimensions
var Dimensions = require('Dimensions'); …

是否可以选择在您定义的颜色上包含不透明度作为sass变量中的主要/次要颜色？在减轻($ color,amount)功能的时尚？

我试图使用CSS动画在2秒后淡入一个元素.该代码在新浏览器中运行良好,但在旧浏览器中,由于"不透明度:0",该元素将保持隐藏状态.

我希望它在旧的浏览器中可见,我不想让它发送javascript.可以用CSS解决吗？例如.一些目标浏览器如何不支持动画？

CSS:

#element{
animation:1s ease 2s normal forwards 1 fadein;
-webkit-animation:1s ease 2s normal forwards 1 fadein;
opacity:0
}

@keyframes fadein{from{opacity:0}
to{opacity:1}
}

@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}

HTML:

<div id=element>som content</div>

编辑:改变标题实际上是正确的

我正在尝试在所有HTML和CSS中模拟一个模态弹出窗口,并且我正在运行我正在做的一个单一元素.我希望最里面的div,即内容的div,不像边框那样不透明,但无论我尝试使用CSS,我都无法让它工作.这是代码:

CSS

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

HTML

  <table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
    <div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden; 
        top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
        border: solid 1px navy; background-color: White;">
        <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
            <div style="#position: relative; #top: -50%;"
                ><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
        </div>
    </div></td></tr></table>

我在这方面达到了目的.无论如何我都不是HTML或CSS大师,因此非常感谢解释为什么解决方案有效.

假设我想让JPanel%20的不透明度可见？我不是指setOpaque(绘制或不绘制)或setVisible(显示或隐藏)......我的意思是让它透视JPanel ..你知道吗？

这可能吗？

在QML中,如何防止子元素从其父元素继承不透明度？我想为父元素及其子元素设置不同的不透明度值.

我有一个jquery函数来改变鼠标悬停时图像的不透明度以产生脉动效果,但我想改变它,以便图像加载后图像就会发出脉动,将鼠标悬停元素移除鼠标悬停鼠标.

这是我的代码

    (function($) {
        $(document).ready(function() {
            window.pulse_image = null;
            window.pulse_continue_loop = false;

            $('.pulse_image').mouseover(function() {
            // User is hovering over the image.
            window.pulse_continue_loop = true;
            window.pulse_image = $(this);

            PulseAnimation(); // start the loop
        }).mouseout(function() {
            window.pulse_continue_loop = false;
            window.pulse_image.stop();
            window.pulse_image.css('opacity',1);
        });
    });
})(jQuery);


function PulseAnimation()
{
    var minOpacity = .33;
    var fadeOutDuration = 650;
    var fadeInDuration = 650;

    window.pulse_image.animate({
        opacity: minOpacity
    }, fadeOutDuration, function() {
        window.pulse_image.animate({
            opacity: 1
        }, fadeInDuration, function() {
            if(window.pulse_continue_loop) {
                PulseAnimation();
            }
        })
    });
}

来自 http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

当许多点重叠时,散点图很难解释,因为这种重叠会掩盖特定区域中的数据密度.一种解决方案是对绘制点使用半透明颜色,以便不透明区域表示在这些坐标中存在许多观察.

下面是我在R中的黑白解决方案的示例:

MyGray <- rgb(t(col2rgb("black")), alpha=50, maxColorValue=255)
x1 <- rnorm(n=1E3, sd=2)
x2 <- x1*1.2 + rnorm(n=1E3, sd=2)
dev.new(width=3.5, height=5)
par(mfrow=c(2,1), mar=c(2.5,2.5,0.5,0.5), ps=10, cex=1.15)
plot(x1, x2, ylab="", xlab="", pch=20, col=MyGray)
plot(x1, x2, ylab="", xlab="", pch=20, col="black")

然而,我最近在PNAS中发现了这篇文章,它采用了类似的方法,但使用热图着色而不是不透明度作为重叠点数的指标.这篇文章是Open Access,所以任何人都可以下载.pdf并查看图1,其中包含我想要创建的图形的相关示例.本文的方法部分表明分析是在Matlab中完成的.

为方便起见,这里是上述文章中图1的一小部分:

如何在R中创建一个散点图,使用颜色而不是不透明度作为点密度的指标？

对于初学者,R用户可以install.packages("fields")使用该功能在库中访问此Matlab配色方案tim.colors().

是否有一种简单的方法可以制作出类似于上述文章图1的数字,但是在R？谢谢!

我有一个strangs CSS问题.

下面是一个非常简单的代码示例,演示了这个问题.

<html>
  <head>
     <style>
      .hover {
        float: right;
      }
      .hover:hover {
        background-color: blue;
      }
      .blocker {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="hover">hover</div>
    <div class="blocker">blocker</div>
  </body>
</html>

我有一个div A,漂浮在另一个div B上,它的不透明度为0.5.我想在浮动div中添加一个CSS悬停规则.但由于某种原因,我不能.

无论我左右浮动,都无关紧要.

但是当我将不透明度更改为1时,悬停规则突然起作用.

任何人都可以解释这种行为吗？

我可以通过在一个范围内包含阻止div的内容来"修复"这个问题,但感觉就像我不应该这样.

这是一个jsFiddle,展示了这个问题:http://jsfiddle.net/ed82z/1/