如果我有以下代码，如何让我的背景图像在CSS中透明？ [英] How do i make my background image transparent in CSS if I have the following code?
本文介绍了如果我有以下代码，如何让我的背景图像在CSS中透明？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让我的背景图像稍微透明。我在这里阅读了另一篇关于这个话题的文章，但是当我尝试它的时候它不起作用。我希望我没有提供太少或太多的信息。
这是我的HTML代码：
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01过渡// EN>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< title>我的标题< / title>
< link type =text / css =stylesheethref =../ Stylesheets / stylesheet1.css>
< link type =text / css =stylesheethref =../ Stylesheets / stylesheet2.css>
< link type =text / css =stylesheethref =../ Stylesheets / stylesheet3.css>
< / head>
< body>
< div id =container>
< div id =backgroundclass =translucent>< / div>
< div id =content>
< div id =backgroundIMG>
< / div>
< / div>
< H1>< div align =center> A标题< / div>< / H1>
< p>
< div style =width：890px; height：40px; border：5px dotted Coral;>
CONTENT
< / div>
< p>
CONTENT
< div class =index>
< H2>索引< / H2>
首页（现在）
< br>
< a href =page2.html>无聊主页< / a>
< br>
< a href =page3.html>表格在这里！< / a>
< / div>
< / div>
< / body>
以下是我的样式表：
stylesheet1：
html
{
font-weight：bold;
}
body
{
margin-left：30px;
margin-right：30px;
背景重复：不重复;
宽度：100％;
身高：100％;
}
stylesheet2：
.index
{
line-height：1.5em;
填充：1em;
border：DarkGreen solid 5px;
text-align：left;
width：890px;
}
.bgCyan
{
background-color：cyan;
颜色：＃525252;
}
.bgGreen
{
background-color：LightGreen;
颜色：DarkBlue;
}
.bgBoredText
{
background：url（../ Images / my_image.jpg）no-repeat center center fixed;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
}
.translucent
{
opacity：0.4;
filter：alpha（opacity = 40）; / *对于IE * /
}
stylesheet3：
#container
{
position：relative;
width：200px;
height：200px;
}
#background，#content
{
position：absolute;
top：0;
剩下：0;
}
#backgroundIMG
{
background-image：url（../ Images / my_image.jpg）;
}
预先感谢您
解决方案
据我所知，CSS不能改变背景图像的不透明 。您必须在图像编辑程序中更改图像以减少图像的不透明度。
I am trying to make my background image slightly transparent. I read another article here on this topic but it did not work when I tried it. I hope I didn't give too little or too much info. Here is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Title</title>
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet1.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet2.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet3.css">
</head>
<body>
<div id="container">
<div id="background" class="translucent"></div>
<div id="content">
<div id="backgroundIMG">
</div>
</div>
<H1><div align="center">A heading</div></H1>
<p>
<div style="width:890px;height:40px;border:5px dotted Coral;">
CONTENT
</div>
<p>
CONTENT
<div class="index">
<H2>Index</H2>
Home (on now)
<br>
<a href="page2.html">Bored Main Page</a>
<br>
<a href="page3.html">Tables are here!</a>
</div>
</div>
</body>
Here are my stylesheets:
stylesheet1:
html
{
font-weight: bold;
}
body
{
margin-left:30px;
margin-right: 30px;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
stylesheet2:
.index
{
line-height: 1.5em;
padding: 1em;
border: DarkGreen solid 5px;
text-align: left;
width: 890px;
}
.bgCyan
{
background-color: cyan;
color: #525252;
}
.bgGreen
{
background-color: LightGreen;
color: DarkBlue;
}
.bgBoredText
{
background: url(../Images/my_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.translucent
{
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
stylesheet3:
#container
{
position: relative;
width: 200px;
height: 200px;
}
#background, #content
{
position: absolute;
top: 0;
left: 0;
}
#backgroundIMG
{
background-image: url(../Images/my_image.jpg);
}
Thank you in advance
解决方案
As far as I know, CSS can't alter the opacity of a background image. You will have to alter the image in an image editing program to reduce it's opacity.
这篇关于如果我有以下代码，如何让我的背景图像在CSS中透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
