imagen de fondo transparente

Question

Tengo el siguiente 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; 
     } 

y iam usando esto como

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

que se aplica a todos los elementos que utiliza el class.Instead quiero usar la opacidad y filtra solamente a fondo image..How puedo hacerlo ??

Answer 1

No se puede ajustar la translucidez de una imagen de fondo con CSS.

Puede ajustar la translucidez de un elemento completo (opacity) o de un fondo plano rgba(), pero no una imagen de fondo.

Utilice un formato de imagen que admita la translucidez de forma nativa (como PNG) e incruste la translucidez que desea en la imagen misma.

Answer 2

¿Por qué no creas otro div y lo usas como un pseudo fondo o algo así?

Answer 3

El elemento que debe tener fondo semitransparente:

#myPass 

Es así como sin tocar el código HTML, añadimos la transparencia del fondo controlable para el elemento:

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

Lo único que hay La nota es que el elemento #myPass, se debe colocar:

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

Answer 4

Esta es la manera de hacerlo:

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

Answer 5

Acabo de toparme con este problema yo mismo. Si combina el degradado lineal con la url de la imagen de fondo, puede controlar la opacidad de la imagen. Al mantener los dos "degradados" iguales, puede obtener un efecto de filtro/opacidad sin utilizar la opacidad adecuada.

decir

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