标签: opacity

我尝试过以下方法:

(这实际上是针对fancybox,因为叠加层没有显示在chrome/safari中:

   $("#fancy_overlay").css({<br />
                    'background-color': opts.overlayColor,<br />
                    'opacity': opts.overlayOpacity,<br />
                    '-moz-opacity': opts.overlayOpacity,<br />
                    '-khtml-opacity': opts.overlayOpacity,<br />
                    '-webkit-opacity:' : opts.overlayOpacity<br />
    }).show();

而且还没什么(在chrome/safari中)

我究竟做错了什么？

我有IE8的问题,我不能使<a>元素透明.我发现了这些相关的SO问题,但我没有运气,因为那里提供的答案:

• Opacity CSS无法在IE8中运行
• 网页不透明？

我试过通过使用" 给布局 " zoom: 1;,但它没有帮助.这是我的测试CSS,取自此页面上的示例:

.test {
  background-color: #6374AB;
  width: 100%;
  color: #ffffff;
  zoom: 1;
}
.opaque1 {
  opacity: .5;
}
.opaque2 {
  filter: alpha(opacity=50);
}
.opaque3 {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.opaque4 {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

并测试HTML:

<p class="test">Test paragraph without opacity.</p>
<p class="test opaque1">Test paragraph with <code>opacity</code></p>
<p class="test opaque2">Test paragraph with <code>filter</code></p>
<p class="test opaque3">Test paragraph with <code>-ms-filter</code></p>
<p class="test opaque4">Test paragraph with compatibility note</p>

<p>
  <a class="test" href="#">Test …

在我目前正在对我有一个网站<ul>包含的负载<li>的,其中每个包含<div>,<span>,<img>等.

当我将鼠标悬停在其中一个上时<li>,我正在使用jQuery将所有其他 的不透明度设置<li>为0.3,以引起对焦点的注意<li>.

我的问题是IE8(并且只有 IE8)是动画<li>的不透明度,但没有任何子元素<li>.

有人之前遇到过这个问题,或者知道修复？

谢谢!

编辑:

请参阅以下jsFiddle示例 - http://jsfiddle.net/BJ8gK/22/

鉴于包含一些TGraphic后代的Delphi TPicture,我需要计算像素颜色和不透明度.我想每个类都必须有不同的实现,我想我已经覆盖了TPngImage.是否支持32位位图的透明度？我能否以比以下更普遍的方式解决问题？:

procedure GetPixelColorAndTransparency(const Picture: TPicture; X, Y:
    Integer; out Color: TColor; out Opacity: Byte);
var
  Bmp: TBitmap;
begin
  if Picture.Graphic is TPngImage then
  begin
    Opacity := (TPngImage(Picture.Graphic).AlphaScanline[Y]^)[X];
    Color := TPngImage(Picture.Graphic).Pixels[ X, Y ];
  end
  else
  if Picture.Graphic is TBitmap then
  begin
    Color := Picture.Bitmap.Canvas.Pixels[ X, Y ];
    Opacity := 255;
  end
  else
  begin
    Bmp := TBitmap.Create;
    try
      Bmp.Assign(Picture.Graphic);
      Color := Bmp.Canvas.Pixels[ X, Y ];
      Opacity := 255;
    finally
      Bmp.Free;
    end;
  end;
end;

嘿,我想知道你们中是否有人遇到过类似的问题？我正在网页的广告部分工作,它有一个非常酷的背景,我想继续进入元素的部分,所以我有一个框,一个框的rss提供到网站上的更新,然后我有一个广告框.这是我的HTML:

<div class="side">
  <div id="ad">
    bla
  </div>
  <div id="rss_news">
    double bla
  </div>
</div>

和css:

.side {
  float: left;
  background-color: black;
  width: 300px;
  min-height: 710px;
  padding: 0 0 0 0px;
  margin-top: 25px;
  border: 1px solid white;
  border-radius: 8px 8px 8px 8px;
  opacity: 0.3;

 }

 #ad {
   border: 1px solid blue;
   height: 320px;
   max-height: 350px;
   margin: 15px;
   opacity: 1;

 }

 #rss_news {
   border: 1px solid yellow;
   height: 320px;
   max-height: 350px;
   margin: 15px; 
   opacity: 1;

 }

正如你所看到的那样,正如我所期待的那样,侧面阶级将他的属性嵌入他的内部.有没有办法,我能以某种方式告诉其他id标签忽略不透明度？

提前致谢

例如,如果您有一个由圆形和矩形组成的简单"间谍玻璃"形状,并且两者的轮廓都是部分透明的,那么在两个形状重叠的地方,您能否有效地减少不透明度？

我如何制作它以使不透明度正常,直到有人在它上面盘旋并且当它们悬停在它上面时图片亮起但将其他图像发送到后台？我也希望图像淡入淡出.

例

这是jsfiddle

img { 
opacity: 0.7; 
} 

img:hover { 
opacity: 1; 
}
.radio div[type='radio'] {
background: transparent;
border:0px solid #dcdcdc;
border-radius:10px;
padding:0px;
display: inline-block;
margin-left: 5px;
cursor:pointer;
text-align: left;
opacity: 0.7;
}
.radio div:hover[type='radio'] {
opacity: 1; 
}

不透明度很好,但我希望图像具有正常的不透明度,直到有人在它上面盘旋.

我试图将#ffffff50%不透明度的(白色)背景设置 为TextView.
我尝试使用android:alpha=0.5它,但它也使文本50%透明.

我需要在白色背景下设置50%的不透明度.
我在这里找到一个教程,但不太了解.

请给我任何参考.提前致谢.

我来自这个链接，其中包含有关使用Velocity.js进行svg动画时IE崩溃的问题。

并且意识到，地狱，firefox实际上是在此jsbin中渲染不透明度为0的svg文本。

转载与Firefox 36

解决问题，解决问题？

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="949.574px" height="625.847px" viewBox="0 0 949.574 625.847" enable-background="new 0 0 949.574 625.847"
   xml:space="preserve">

<g>
  <g>
    <g>
      <path fill="#C4C6C8" d="M30.5,60.993c-5.386,0-10.703-1.446-15.376-4.184c-0.455-0.266-0.608-0.853-0.342-1.308
        c0.267-0.456,0.854-0.608,1.309-0.342c4.38,2.565,9.362,3.921,14.409,3.921c5.048,0,10.03-1.356,14.408-3.922
        c0.455-0.268,1.042-0.114,1.309,0.343c0.267,0.455,0.114,1.041-0.342,1.308C41.204,59.547,35.888,60.993,30.5,60.993z"/>
      <path fill="#C4C6C8" d="M9.55,52.259c-0.245,0-0.49-0.095-0.678-0.282C3.15,46.219,0,38.592,0,30.498
        c0-8.092,3.15-15.721,8.871-21.479c0.373-0.375,0.979-0.376,1.353-0.005c0.375,0.372,0.377,0.978,0.005,1.352
        c-5.363,5.399-8.316,12.55-8.316,20.133c0,7.585,2.953,14.733,8.316,20.131c0.372,0.375,0.37,0.979-0.004,1.353
        C10.037,52.166,9.794,52.259,9.55,52.259z"/>
      <path fill="#C4C6C8" d="M15.608,5.965c-0.328,0-0.648-0.168-0.826-0.473c-0.267-0.455-0.114-1.041,0.342-1.308
        C19.797,1.446,25.114,0,30.5,0s10.703,1.446,15.376,4.185c0.456,0.267,0.608,0.853,0.341,1.308
        c-0.267,0.456-0.853,0.61-1.308,0.343C40.528,3.269,35.546,1.912,30.5,1.912c-5.047,0-10.029,1.356-14.409,3.923
        C15.938,5.924,15.772,5.965,15.608,5.965z"/>
      <path fill="#C4C6C8" d="M51.449,52.259c-0.243,0-0.487-0.093-0.674-0.277c-0.375-0.373-0.377-0.978-0.005-1.353
        c5.363-5.396,8.316-12.546,8.316-20.131c0-7.584-2.953-14.733-8.315-20.133c-0.372-0.374-0.37-0.979,0.005-1.352
        c0.373-0.373,0.979-0.371,1.352,0.005C57.849,14.777,61,22.405,61,30.498c0,8.094-3.151,15.722-8.872,21.479
        C51.941,52.164,51.695,52.259,51.449,52.259z"/>
    </g>
    <polygon fill="#FFFFFF" points="30.5,44.277 16.5,23.028 30.5,23.028 44.5,23.028     "/>
  </g>

  <text transform="matrix(1 0 0 1 75 47.875)" fill="#FFFFFF" font-family="'AgfaRotisSansSerif'" font-size="36">f
  </text>
  <text transform="matrix(1 0 0 1 75 224.875)">
  <tspan class="tanim1 animated" …

下面是否有更好更简单的方法来编写不透明度的缓入效果？

CSS:

 .button-hover {
    font-family: arial black;
    font-size: 100px;
    color: #000;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.button-hover:hover {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 0.5;
}

你可以看到我重复这些行两次看起来不太理想:

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; …