标签: opacity

我一直在网站上看到60-80%的不透明度.他们看起来很酷,但我不确定他们为什么这样做.它是Javascript,还是图像？如何更改表格的不透明度？

CSS代码:

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

的JavaScript/jQuery的:

$("#btn").animate({opacity:1,"margin-left":"-25px"});

我对Firefox,Chrome等上面的代码没有任何问题.但它不适用于任何版本的Internet Explorer.

问题是PNG图像呈现奇怪,透明PNG的背景看起来很黑.当我删除不透明效果时,没有问题.

解决办法是什么？

我试图淡化网页上的所有元素,除了一个div.我已经能够使用以下jQuery淡化所有元素:

$('*').css('opacity', .3);

但是,似乎不透明度是从父元素继承的属性,即使我明确地将div的不透明度设置为1.我现在对任何解决方案都画了一个空白,所以我可以在这里得到一些帮助吗？

    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).animate({opacity: 1}, 1500);
      });
}

这是我的动画功能,div#fruit它确实有效.

问题是这样的; 在动画结束mouseout之前mousein,它必须在开始之前完成动画mouseout.(希望有道理)

这通常不会引人注意,但持续时间很长,很明显.

我希望动画停止并反转到原始状态,而不是完成动画.

我有一个页面模式对话框,如果用户单击编辑按钮,则会呈现该对话框.该对话框要求输入用户名和密码,并有一个提交按钮.如果用户名和密码未验证,则会显示错误.

问题是,如果用户名和密码不进行身份验证,则每次身份验证失败时,模式背景会越来越暗.

会导致什么？

<p:dialog id="dialog" header="Login To Edit" widgetVar="dialog" visible="#{fundingBacker.loginVisible}" modal="true" 
    resizable="false" closable="false" draggable="true" rendered="#{!userBean.loggedIn}">
    <h:form>

        <p:ajaxStatus style="width:16px;height:16px;">
            <f:facet name="start">
                <p:graphicImage value="../images/loading4.gif" />
            </f:facet>
            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
        </p:ajaxStatus>

        <p:messages autoUpdate="true" showDetail="true" />

        <h:panelGrid columns="2" cellpadding="5">

            <h:outputLabel for="lanId" value="LanID:" />
            <p:inputText value="#{currentUser.lanID}" id="lanId" required="true" label="lanId" requiredMessage="Lan ID is required" />

            <h:outputLabel for="password" value="Password:" />
            <p:password value="#{currentUser.password}" id="password" required="true" label="password" feedback="false" requiredMessage="Password is required" />

            <p:commandButton id="loginButton" value="Login" type="submit" styleClass="primaryButton" action="#{currentUser.performLogin}" update="dialog"/>

        </h:panelGrid>
    </h:form>
</p:dialog>

我偶然发现了这个网站:开始思考.这可能是使用twitter的bootstrap吗？我没有在css文件中看到不透明度设置？是否像添加它一样容易.

我有一个带有文本的div框(这应该是一个导航栏).div框设置为不透明度0.4,文本也是自动设置.我希望文本是正常的不透明度(不透明),但我无法弄清楚如何做到这一点.是否可以使div透明/低不透明但保持文本内部不？我已经搜索过并尝试过,但似乎没有任何效果.

HTML

<div class="finboks">
           <br><br> 
              <li><font size="3px"><a href="index.html">HEIM</a></font></li>
              <li><font size="3px"><a href="elevane.html">ELEVANE</a></font></li>
              <li><font size="3px"><a href="tilsette.html">TILSETTE</a></font></li>
              <li><font size="3px"><a href="Bilete.html">BILETE</a></font></li>
              <li><font size="3px"><a href="kontakt.html">KONTAKT</a></font></li>
              <li><font size="3px"><a href="omskulen.html">OM SKULEN</a></font></li>

              <select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
                <option> LENKJER </option>
                <option value="https://fronter.com/sognfjordanegs/index.phtml">Fronter</option>
                <option value="https://www.gaular.kommune.no/Filnedlasting.aspx?MId1=39&amp;FilId=335">Skuleruta 2012-13</option>
              </select>
            </ul>
          </div>

CSS

div.finboks{
position: absolute; 
width: 1349px;  
height: 115px; 
opacity: 0.4; 
z-index: 2; 
left: 5px;
top: 102px;
background-color: #FFFFFF;
}

body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

我尝试使用上面的方法在背景图像上方生成半透明的白色背景.它不起作用,只显示背景图像,背景颜色似乎被忽略.如何调整身体背景图像的不透明度？

我试图让我的文本使用以下代码将选择转换不透明度从0输入到1.如果没有过渡和不透明度设置,文本将按预期显示.但是使用此代码,不透明度从0开始但从不变为1; 和文本值没有添加？[我的代码中的所有其他转换按预期工作.]

有任何想法吗？非常感激!

/**
   * @param text
   *           selection with data to add text from & truncate by, with a
   *           delay.
   */
  function addBubbleTextByData ( text ) {
     text.style( "opacity", 0 ).transition().delay( 1.1 * transitionDelay )
           .style( "opacity", 1 ).text(
                 function ( bubbleDatum ) {
                    var bubbleDatumText = ""; // for bubbles too small for any text
                    if ( bubbleDatum.r > 15 ) {
                       // Bubble is large enough to fit text
                       bubbleDatumText = bubbleDatum[JSON_NAME_KEY].toString().substring( 0,
                             bubbleDatum.r / 4 …

我有这个:

.striped-border {
    border: 8px solid transparent;
    border-image: url(../img/stripes.png) 9 round;
}

我想要的是:

是否可以仅对边框图像应用不透明度而不是内容？