CSS 透明背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6502157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
transparent background image
提问by RAVITEJA SATYAVADA
I have the following css.
我有以下 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;
}
and iam using this as
我正在使用它作为
<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>
that is applied to all the elements that uses the class.Instead i want to use opacity and filters only to background image..How can i do it ??
这适用于使用该类的所有元素。相反，我只想对背景图像使用不透明度和过滤器。我该怎么做？
回答by Quentin
You can't adjust the translucency of a background image with CSS.
您无法使用 CSS 调整背景图像的半透明度。
You can adjust the translucency of an entire element (opacity) or of a plain background rgba(), but not a background image.
您可以调整整个元素 ( opacity) 或纯背景的半透明度rgba()，但不能调整背景图像。
Use an image format that supports translucency natively (such as PNG) and embed the translucency you want in the image itself.
使用本机支持半透明的图像格式（例如 PNG）并将所需的半透明嵌入图像本身。
回答by Daniel Birowsky Popeski
The element that needs to have semi-transparent background:
需要半透明背景的元素：
#myPass
This is how without touching the HTML, we add controllable transparency background to the element:
这就是我们如何在不接触 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;
}
The only thing to note is that the #myPasselement, must be positioned:
唯一需要注意的是#myPass元素，必须被定位：
#myPass {
position: relative; /* absolute is good too */
}
回答by Suraj Neupane
This is the way to do it:
这是这样做的方法：
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;
}
回答by Andrew
Just ran into this issue myself. If you combine linear-gradient with the background image url, you can control image opacity. By keeping the two "gradients" the same, you can get a filter/opacity effect without using opacity proper.
刚刚自己遇到了这个问题。如果将 linear-gradient 与背景图片 url 结合使用，则可以控制图片的不透明度。通过保持两个“渐变”相同，您可以在不使用不透明度的情况下获得过滤器/不透明度效果。
i.e.
IE
.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;
}
回答by Erric
Why don't you create another div and use it as a pseudo-background or something?
为什么不创建另一个 div 并将其用作伪背景或其他东西？
