透明背景图片答案

【问题标题】：transparent background image透明背景图片
【发布时间】：2011-09-24 00:50:09
【问题描述】：

我有以下 css。

   #mypass{
                background-image: url("Images/logo.png");
                background-attachment: fixed;
                background-position:140px 100px ;
                background-size: 100px;
                background-repeat: no-repeat;
                opacity:0.5;
                fileter:alpha(opacity=40);
                color: blue;
        }

我将其用作

<div id="mypass">
      <center><h2>PRAGATI ENGINEERING COLLEGE</h2>
    <h5>1-378,ADB Road,Surampalem-533437,E.G.Dist.,ph:08852-252233</h5></center>

      <%    out.println("________________________________________________________");
        String photo="Image/"+id+".jpeg";
       System.out.println(photo);

       String yy="";
       int y=((1900+d.getYear())-(Integer.parseInt(id.substring(0, 2))+2000))+1 ;
       switch(y){
          case 1:   yy=y+" st";break;
          case 2:   yy=y+" rd";break;
          case 3:   yy=y+" rd";break;
          case 4:   yy=y+" th";break;
          default: yy=y+" th";
       }

       int branch=Integer.parseInt(id.substring(6,8));
       System.out.println(branch);
       switch(branch){
         case 12:yy+=" IT";break;
         case 05:yy+=" CSE";break;
         case 03:yy+=" MECH";break;
         case 02:yy+=" EEE";break;
         case 04:yy+=" ECE";break;
         default:yy+="PEC";
       }
    %>
      <h2 class="buspass" style="color:#FF33CC"><a class=title onclick="javascipt:window.print(), width=400, height=400" onmouseover="this.style.cursor='hand'">BusPass</a></h2>
      <img class="printright" src="<%=photo%>" width="90" height="90" />
      <table>
         <!-- <tr><td>RollNumber</td><td>: <%=id%></td></tr> -->
          <tr ><td>Name</td><td style="color:black">: <%=name%></td></tr>
          <tr><td>Class</td><td style="color:black">: <%=yy%></td></tr>
          <tr><td>AcadamicYear</td><td style="color:black">: <%=s%></td></tr>
          <tr><td>Stage</td><td style="color:black">: <%=pickuppoint%></td></tr>
          <tr><td>BusRoute</td><td style="color:black">: <%=routecode%></td></tr>
        <!--  <tr><td>SeatNo</td><td>: <%=seatno%></td></tr>-->
        <!--  <tr><td>IssueDate</td><td>: <%=ddd%></td></tr> -->
      <!--    <tr><td>ValidTill</td><td>: <%=valid%></td></tr> -->
      </table>
      <h3 class="printrightdown">INCHARGE</h3>
    </div>

这适用于使用该类的所有元素。相反，我只想对背景图像使用不透明度和过滤器。我该怎么做？？

【问题讨论】：

哇！坚持住！您的 CSS 无效。您将class 与id 混淆了。您的代码中没有不透明度或过滤器。
保存图像的透明度。（PNG 中的 Alpha 通道）
@SpliFF - 当人们试图用这些东西站起来时，你认为他们应该去哪里？冷静地解释 OP 可能会感到困惑的任何事情，而不是因为他们使用这个网站的原因而攻击 OP，这对您有无限的帮助。
@sscirrus：SO 不是一个教程网站——它是一个 QA 网站。没有连贯的 Q，你就不会得到 A。就这么简单。
我只想指出 css filter 属性拼写错误...

标签： css opacity

【解决方案1】：

我自己也遇到了这个问题。如果将线性渐变与背景图像 url 结合，则可以控制图像不透明度。通过保持两个“渐变”相同，您可以在不使用不透明度的情况下获得过滤器/不透明度效果。

即

 .bg-image {
        background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(path-to-image.jpg) center no-repeat;
        background-size: cover;
      }

【讨论】：

【解决方案2】：

这是这样做的方法：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

【讨论】：

【解决方案3】：

需要有半透明背景的元素：

#myPass

这就是我们如何在不触及 HTML 的情况下，为元素添加可控的透明背景：

#myPass::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    bottom: 0: left: 0;
    background: url(image.jpg) no-repeat top center;
    opacity: 0.5;
}

唯一需要注意的是#myPass元素，必须定位：

#myPass {
    position: relative; /* absolute is good too */
}

【讨论】：

【解决方案4】：

您无法使用 CSS 调整背景图像的半透明度。

您可以调整整个元素 (opacity) 或纯背景 rgba() 的半透明度，但不能调整背景图像。

使用原生支持半透明的图像格式（如 PNG），并将所需的半透明嵌入图像本身。

【讨论】：

【解决方案5】：

为什么不创建另一个 div 并将其用作伪背景或其他东西？

【讨论】：