【求助】关于html背景图片透明度调整

alex8315 2015-07-28 10:48:10
网上看到说是: filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

但是自己试了一下没有成功。

请问应该如何把这句写到我如下html的代码中去? 菜鸟求助,多谢!
背景图片是 <body background="Background_1280x1024.jpg" ; >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body background="Background_1280x1024.jpg" ; >
<p> </p>
</body>

</html>
...全文
21059 8 打赏 收藏 举报
写回复
8 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
菜猿 2016-05-31
引用 5 楼 alex8315 的回复:
[quote=引用 4 楼 zpjshiwo77 的回复:]
改成background:url(Background_1280x1024.jpg);


恩,的确是有了,但是因为这个是背景图片,前面是文字内容,我把你的代码拷贝到我的代码中后,感觉图片是在文字前了,文字不能够进行选择,请问如何修改?谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#mydiv{
width:100%;
height:300px;
background-image: url(%E8%B1%AA%E8%BD%A6/ba.jpg);
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
position:absolute;
}
#myimg{ text-align:center;padding-top:50px; }
}
</style>
</head>
<body>
<div id="mydiv"></div>
<div id="myimg">
<img src="豪车/1.jpg" />
</div>
</body>
</html>

按照这个方法,把你的文字改成图片,新插入的图片还是会收到影响,为什么~?
  • 打赏
  • 举报
回复
oConqueror1 2015-12-28
楼上帮了我大忙了,感谢
  • 打赏
  • 举报
回复
zpjshiwo77 2015-07-30
方法一:把文字放在<div class="bodystyle"> </div>里面,但因为opacity属性会被继承,会导致你的文字也会透明,所以要在文字的CSS样式里面声明opacity:1;把它变得不透明; 方法二:在.bodystyle里面加上z-index:1;然后把你需要的文字放在一个新的div里面 <div style="position:absolute; z-index:2;" > <div> 额外介绍一下z-index属性:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。值越高会放在越前面。这个属性起作用的前提是元素要脱离文档流进行绝对定位,也就是要声明position:absolute;
  • 打赏
  • 举报
回复
zpjshiwo77 2015-07-29
改成background:url(Background_1280x1024.jpg);
  • 打赏
  • 举报
回复
alex8315 2015-07-29
引用 4 楼 zpjshiwo77 的回复:
改成background:url(Background_1280x1024.jpg);
恩,的确是有了,但是因为这个是背景图片,前面是文字内容,我把你的代码拷贝到我的代码中后,感觉图片是在文字前了,文字不能够进行选择,请问如何修改?谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE5 {color: #000000}
.STYLE7 {font-family: Arial, Helvetica, sans-serif}
.STYLE8 {font-size: 9px}
.STYLE9 {font-size: 11px}
.STYLE10 {font-size: 12px}
.STYLE15 {
	font-size: 28px;
	font-weight: bold;
	font-family: "Times New Roman", Times, serif;
}
-->

.bodystyle{
filter:alpha(opacity=20);  
-moz-opacity:0.2;  
-khtml-opacity: 0.2;  
opacity: 0.2;
height:100%;
width:100%;
position:absolute;
background:url(Background_1280x1024.jpg) ; 
}

</style>
</head>

<body>

<div class="bodystyle">  
</div>
<p> </p>

<div align="center">
  <pre class="STYLE15">Megdragon</pre>
</div>
<p> </p>
<p> </p>
<ul class="STYLE8"><li class="STYLE7 STYLE1 STYLE10"><strong>Installation:</strong></li>
  <li class="STYLE7 STYLE9 STYLE5">Ask <span class="STYLE5"

style='mso-fareast-font-family:媅SO'>the owner to raise SOR to have the access right to install it from Mysoftware. </span>
      </p>
  </li>
  <li class="STYLE7 STYLE9 STYLE5">Installation Guide: <a href="file:///O|/673/673/Automation Application/MySoftware/Megdragon/Installation Guide_Megdragon.docx">O:\673\673\Automation Application\MySoftware\Megdragon\Installation Guide_Megdragon.docx</a></li>
</ul>
</body>
</html>
  • 打赏
  • 举报
回复 1
zpjshiwo77 2015-07-28
引用 1 楼 zpjshiwo77 的回复:
body是不能直接设置成透明的,你重新弄个div吧,如下:

<head>
<style type="text/css">
.bodystyle{
filter:alpha(opacity=50);  
-moz-opacity:0.5;  
-khtml-opacity: 0.5;  
opacity: 0.5;
height:100%;
width:100%;
position:absolute;
background="Background_1280x1024.jpg" ; 
}
<style>
</head>
<body >
<div class="bodystyle">  
</div>
<p> </p>
</body>
css中background="Background_1280x1024.jpg" ;这一句我写错了,你记得改一下。
  • 打赏
  • 举报
回复
zpjshiwo77 2015-07-28
body是不能直接设置成透明的,你重新弄个div吧,如下:

<head>
<style type="text/css">
.bodystyle{
filter:alpha(opacity=50);  
-moz-opacity:0.5;  
-khtml-opacity: 0.5;  
opacity: 0.5;
height:100%;
width:100%;
position:absolute;
background="Background_1280x1024.jpg" ; 
}
<style>
</head>
<body >
<div class="bodystyle">  
</div>
<p> </p>
</body>
  • 打赏
  • 举报
回复
alex8315 2015-07-28
引用 2 楼 zpjshiwo77 的回复:
[quote=引用 1 楼 zpjshiwo77 的回复:] body是不能直接设置成透明的,你重新弄个div吧,如下:

<head>
<style type="text/css">
.bodystyle{
filter:alpha(opacity=50);  
-moz-opacity:0.5;  
-khtml-opacity: 0.5;  
opacity: 0.5;
height:100%;
width:100%;
position:absolute;
background="Background_1280x1024.jpg" ; 
}
<style>
</head>
<body >
<div class="bodystyle">  
</div>
<p> </p>
</body>
css中background="Background_1280x1024.jpg" ;这一句我写错了,你记得改一下。 [/quote] 哈怎么改?
  • 打赏
  • 举报
回复
发帖
HTML5

3.8w+

社区成员

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
帖子事件
创建了帖子
2015-07-28 10:48
社区公告
暂无公告