是否可以,仅使用CSS,使background元素半透明但元素的内容(文本和图像)不透明？

我想在不将文本和背景作为两个单独元素的情况下实现此目的.

尝试时:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

看起来子元素受父母的不透明度影响,因此opacity:1相对于opacity:0.6父元素而言.

我可以将opacity属性分配给仅background属性div而不是文本吗？

我试过了:

background: #CCC;
opacity: 0.6;

但这不会改变不透明度.

我使用类似于以下代码的东西:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

我预计这会使背景的不透明度为0.4,文本的不透明度为100%.相反,它们的不透明度均为0.4.

CSS Transitions可用于允许文本段落在页面加载时淡入吗？

我真的很喜欢它在http://dotmailapp.com/上的样子,并且喜欢使用CSS使用类似的效果.

注意:此域名已被购买,不再具有上述效果.可以在Wayback Machine上查看存档副本.

插图

有这个标记:

<div id="test">
    <p>?This is a test</p>
</div>??????????????????????????????????????????????????????

使用以下CSS规则:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}?

如何在加载时触发转换？

如何使跨浏览器(包括Internet Explorer 6)的透明度在一段div时间后文本保持不透明？

我需要在不使用任何库(如jQuery等)的情况下完成它.(但是如果你知道一个库那样做我很想知道,所以我可以查看他们的代码).

是否有一种直接的CSS方式使元素的边框半透明,例如:

border-opacity: 0.7;

？

如果没有,有没有人知道如何在不使用图像的情况下这样做？

目前,我有这个代码:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

它闪烁,但它只在"一个方向"闪烁.我的意思是,它只会淡出,然后它会显示opacity: 1.0出来,然后再次淡出,再次出现,等等......我希望它淡出,然后再次从这个淡入淡出"提升" opacity: 1.0.那可能吗？

是否可以在不影响子元素不透明度的情况下设置背景图像的不透明度？

例

页脚中的所有链接都需要一个自定义项目符号(背景图像),自定义项目符号的不透明度应为50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

我试过的

我尝试将列表项的不透明度设置为50%,但是链接文本的不透明度也是50% - 并且似乎没有办法重置子元素的不透明度:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

我也尝试过使用rgba,但这对背景图片没有任何影响:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, …

我有一个按钮,如下所示:

<Button 
     android:text="Submit" 
     android:id="@+id/Button01" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content">
</Button>

在我的onCreate()活动中,我这样调用Button01:

setContentView(R.layout.main);

View Button01 = this.findViewById(R.id.Button01);
Button01.setOnClickListener(this);

应用程序中有一个背景,我想在此提交按钮上设置不透明度.如何为此视图设置不透明度？这是我可以在java端设置的东西,还是我可以在main.xml文件中设置？

在java方面,我试过Button01.mutate().SetAlpha(100),但它给了我一个错误.

使用HTML5 <canvas>元素,我想加载一个图像文件(PNG,JPEG等),完全透明地将它绘制到画布上,然后将其淡入.我已经想出如何加载图像并将其绘制到帆布,但我不知道如何绘制它的不透明度.

这是我到目前为止的代码:

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

有人请指出我正确的方向,如设置的属性或调用的功能,将改变不透明度？