image de fond transparent

J'ai le code 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 à l'aide de ce que

<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ée à tous les éléments qui utilise la classe.Au lieu de cela je veux utiliser de l'opacité et de filtres d'image d'arrière-plan..Comment puis-je le faire ??

source d'informationauteur RAVITEJA SATYAVADA

  1. 35

    Vous ne pouvez pas régler la transparence d'une image de fond en CSS.

    Vous pouvez régler la transparence de l'ensemble d'un élément (opacity) ou d'un fond uni rgba()mais pas une image d'arrière-plan.

    Utiliser un format d'image qui prend en charge la translucidité de manière native (PNG) et incorporer la translucidité que vous voulez dans l'image elle-même.

  2. 5

    L'élément qui doit avoir de fond semi-transparent:

    #myPass

    C'est de cette façon sans toucher au code HTML, nous ajoutons contrôlable transparence d'arrière-plan de 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 placé:

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

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

  4. 2

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

    Viens de tomber sur ce problème moi-même. Si vous combinez un dégradé linéaire avec l'image de fond de l'url, vous pouvez contrôler l'opacité de l'image. En gardant les deux "dégradés" le même, vous pouvez obtenir un filtre/effet d'opacité, sans l'aide de l'opacité correcte.

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