У меня есть следующий 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, используя это как
<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>
который применяется ко всем элементам, использующим класс. Вместо этого я хочу использовать непрозрачность и фильтрует только фоновое изображение. Как я могу это сделать?
Вы не можете настроить прозрачность фонового изображения с помощью CSS.
Вы можете настроить прозрачность всего элемента (opacity) или простого фона rgba(), но не фонового изображения.
Используйте формат изображения, который поддерживает прозрачность (например, PNG) и встраивает полупрозрачность, которую вы хотите в самом изображении.
Элемент, который должен иметь полупрозрачный фон:
#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 */
}
Почему бы вам не создать еще один div и использовать его в качестве псевдо-фона или чего-то еще?
Это способ сделать это:
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;
}
Просто наткнулся на эту проблему сам. Если вы комбинируете линейный градиент с URL-адресом фонового изображения, вы можете управлять непрозрачностью изображения. Сохраняя два "градиента" одинаковыми, вы можете получить эффект фильтра/непрозрачности без использования прозрачности.
то есть.
.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;
}