透明背景图像

我有以下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; 
     }

和IAM作为

被应用到使用class.Instead我想用不透明的所有元素并仅仅过滤背景image..How

<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>

我能做到这一点??

来源

2011-06-28 RAVITEJA SATYAVADA

哇！挂在那里！你的CSS无效。你把'class'与'id'混淆了。代码中没有不透明或过滤器。 – SpliFF

首先，#mypass仅用于一个元素。如果你想让多个元素使用CSS，请使用类似“.mypass”的 – dtech

保存图像的透明度。（在PNG中的alpha通道） –

你不能用CSS调整背景图像的半透明度。

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

使用本地支持半透明（如PNG）的图像格式，并在图像本身中嵌入所需的半透明效果。

来源

2011-06-28 06:10:11 Quentin

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

来源

2011-06-28 07:57:00 Erric

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

#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 */ 
}

来源

2013-05-20 21:10:00 Birowsky

这是这样做的：

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; 
}

来源

2014-08-24 20:42:55

https://css-tricks.com/snippets/css/transparent-background-images/ – Tim

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

即

.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; 
     }

来源

2017-10-13 18:18:49 Andrew

透明背景图像

回答

相关问题