请问如何实现CSS半透明效果，从而显示出背景图

句号 · 发表于 2014-1-17 15:03:41

请问各位，如何修改common.css中的代码【请具体说明操作方法，谢谢】来实现图中的效果，参考网站是http://www.mmxdm.net/ 希望能像这个网站一样看到背景图片。

我原先的网站是www.jxstjt.com，希望能透明化显示出**的背景图

karry · 发表于 2014-1-19 16:52:53

该网站我已看过！可不可以这样理解？中间整个网站用potoshop做了一张半透明的背景图实现平铺.用css控制他的大小？然后把内容装进去？当然这是css的做法我再告诉你 js 可以实现图片的透明度有个代码好像是“minOpacity”是写在javascript里面的.赋予该值的大小图片便显示不同的透明度!!!你自己可以试试。

句号 · 发表于 2014-1-20 10:19:52

karry 发表于 2014-1-19 16:52
该网站我已看过！可不可以这样理解？中间整个网站用potoshop做了一张半透明的背景图实现平铺.用css控制他的 ...

你好，谢谢你的热心解答，我想问下具体是怎么实现的呢？修改的是根目录下的哪个文件？添加什么样的代码？添加在哪个位置？谢谢！

karry · 发表于 2014-1-21 17:51:50

兄弟！做网站要勤专研.这不我给你专研了一下午  一个简单的css你可以直接问度娘  度娘的学问最大其次再在咱么坛子请教  ok？
css实现半透明  目前较为复杂我也请教了度娘但没个准确信息  把思维再开一开从不同的角度去模仿去山寨其实是一种乐趣
以下为代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div id="zk">kkkkkkkkkkkkjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhhhhhhhhhhhhhhhhhhhhh

</div>
</body>
</html>
         以上代码 .实现背景固定 css布局为固定宽度且居中唯一的缺点是.代码“zk”所盛放的内容在代码“filter: Alpha(Opacity=40,)”的规则下都呈现半透明状
   根据以上我们可以得出想办法让“zk”背景透明.你需要做的是在“zk”的内部填加一张任意大小的“半透明”图片让其沿“x”与“y”轴重复即可实现
以上内容剩下的问题就转移到对potoshop的操作和应用上你需要做的是
“一张任意大小的半透明图”！！！！！！！！！！！！！祝你成功.

karry · 发表于 2014-1-21 17:56:08

举例那段代码仅适用于IE9.0与IE5.5
火狐、ie678都不支持.

qiaqiaonce · 发表于 2014-1-23 11:42:59

<!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">
.shoplist{
width:474px;
height:360px;
position:relative;
float:left;
}
.shopimg a{
position:absolute;
display:block;
border:0px solid #999;
padding:0px;
}
.shopimg a:hover{
text-decoration:none
}
.shopimg a p {
float:left;
display:none;
cursor:hand;
padding-left:10px;
font:bold 14px Arial, Helvetica, sans-serif;
}
.shopimg a:hover p{
width:465px;
height:50px;
float:left;
padding-top:10px;
background-color:rgba(0, 0, 0, 0.8)!important;
filter:Alpha(opacity=80); background:#000; /*　使用IE专属滤镜实现IE背景透明*/
display:block;
position:absolute;
bottom:0;
left:0;
color:#fff;
}
.shopimg a:hover span{
color:#F00;
font-size:18px;
padding-right:10px;
}
</style>
</head>

<body>
<div class="shoplist">
  <div class="shopimg">
      <a href="#"><img src="http://www.uqu8.com/uploadfile/2013/0530/20130530100731990.jpg">
      <p><span>create irregular cookies</span><span style="float:right">Today's sale:200</span><br />Cookies(Easily create irrgular cookies)</p>
      </a></div>
</div>
</body>
</html>

句号 · 发表于 2014-1-24 01:12:20

qiaqiaonce 发表于 2014-1-23 11:42
无标题文档

.shoplist{

谢谢你的热心解答，请问你能解释下这段代码是添加到哪呢？是新建htm格式文件还是在common.css里添加。或是在extend_common.css里面？谢谢！

丢了幸福的猪 · 发表于 2014-3-21 09:49:53

修改CSS样式实现图片透明话

		自动登录	找回密码
密码			立即注册

请问如何实现CSS半透明效果，从而显示出背景图

评分

站长推荐 /1