透明背景圖像

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

透明背景圖像

回答

相關問題