web-dev-qa-db-fra.com

image de fond transparente

J'ai le CSS suivant.

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

et iam en utilisant cela comme

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

qui est appliqué à tous les éléments qui utilise la classe.Instead, je veux utiliser l'opacité et les filtres uniquement à l'image d'arrière-plan ..Comment-je le faire ??

cssopacity
15
RAVITEJA SATYAVADA

Vous ne pouvez pas ajuster la translucidité d'une image d'arrière-plan avec CSS.

Vous pouvez ajuster la translucidité d'un élément entier (opacity) ou d'un fond clair rgba(), mais pas une image d'arrière-plan.

Utilisez un format d'image prenant en charge la translucidité de manière nativement (telle que PNG) et incorporer la translucidité que vous souhaitez dans l'image elle-même.

37
Quentin

L'élément qui doit avoir un arrière-plan semi-transparent:

#myPass

C'est ainsi que sans toucher le HTML, nous ajoutons un fond de transparence contrôlable à l'élément:

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

La seule chose à noter est que le #myPass élément, doit être positionné:

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

C'est la façon de le faire:

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

Pourquoi ne créez-vous pas un autre div et l'utiliser comme pseudo-fond ou quelque chose?

3
Erric

Il suffit de courir dans ce numéro moi-même. Si vous combinez un gradient linéaire avec l'URL d'image de fond, vous pouvez contrôler l'opacité de l'image. En conservant les deux "gradients" de la même manière, vous pouvez obtenir un effet de filtre/opacité sans utiliser d'opacité appropriée.

c'est à dire.

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