这个效果怎么做出来的.CSS/DIV
像这个图片一样，一个背景然后一块半透明的白色小背景，，主要是这个半透明的效果是怎么做的啊，我想过是PS，，不过我不敢确定，因为我曾经的的确确看过这样的网站不是PS做的...
像这个图片一样，一个背景 然后一块半透明的白色小背景，， 主要是这个半透明的效果是怎么做的啊，我想过是PS，，不过我不敢确定，因为我曾经的的确确看过这样的网站不是PS做的
展开
4个回答
展开全部
这种效果要做很简单，做一个白色半透明的png图片，然后把它作为文字所在的那个div的背景即可，这个比较简单，就不详细说明了。
如果是用纯css来做的话，有几种做法：
1、用rgba来定义
例如50%透明度的白色背景，在css里面可以这样定义它：background:rgba(255,255,255,0.5);
前面三个数值是色彩的rgb值，后面的0.5是背景色的透明度。
这种写法是不兼容IE6、7、8的。
2、用滤镜来实现。写法如下：
background:#fff; filter: alpha(opacity=50);
这种写法在IE6、7、8下是正常的，不过带来的问题是，加了样式的DIV和里面的文字都会变成半透明的，如果要解决这个问题的话，就还得把文字层和背景层分离才行，HTML代码会略为繁琐一点。
如果一定要用css来实现，可以考虑综合上面的两种方法，完整样式如下：
background:#fff; filter: alpha(opacity=50);background:rgba(255,255,255,0.5);
不过个人推荐的方法还是用一个白色半透明png图片来作为背景，在现有的浏览器市场占有率下，没必要用纯css的方法来实现背景半透明的功能，增加代码量不说，还要处理一些头疼的浏览器兼容问题。
如果是用纯css来做的话，有几种做法：
1、用rgba来定义
例如50%透明度的白色背景，在css里面可以这样定义它：background:rgba(255,255,255,0.5);
前面三个数值是色彩的rgb值，后面的0.5是背景色的透明度。
这种写法是不兼容IE6、7、8的。
2、用滤镜来实现。写法如下：
background:#fff; filter: alpha(opacity=50);
这种写法在IE6、7、8下是正常的，不过带来的问题是，加了样式的DIV和里面的文字都会变成半透明的，如果要解决这个问题的话，就还得把文字层和背景层分离才行，HTML代码会略为繁琐一点。
如果一定要用css来实现，可以考虑综合上面的两种方法，完整样式如下：
background:#fff; filter: alpha(opacity=50);background:rgba(255,255,255,0.5);
不过个人推荐的方法还是用一个白色半透明png图片来作为背景，在现有的浏览器市场占有率下，没必要用纯css的方法来实现背景半透明的功能，增加代码量不说，还要处理一些头疼的浏览器兼容问题。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个半透明的效果可以用ps来做做一个png图片，也可以用css来做，同时也可以用js来做。
下面给出用css来实现的方法：
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:#ff0000;width:230px;height:136px;padding:10px}
.div-b {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); }/*IE浏览器控制*/
.div-b {width: 96%; padding: 2%; background: rgba(0,0,0,.3); color: #fff;}/*其他浏览器控制*/
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">实现DIV半透明实例演示</div>
</div>
</body>
</html>
下面给出用css来实现的方法：
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:#ff0000;width:230px;height:136px;padding:10px}
.div-b {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); }/*IE浏览器控制*/
.div-b {width: 96%; padding: 2%; background: rgba(0,0,0,.3); color: #fff;}/*其他浏览器控制*/
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">实现DIV半透明实例演示</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个可以用CSS控制的 有透明度控制，其实你也不需要问问题的，你可以直接看一下这个网站源码，又不是加密的 ，可以很清楚看到实现这个样式的方法。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
