这个效果怎么做出来的.CSS/DIV

像这个图片一样,一个背景 然后一块半透明的白色小背景,, 主要是这个半透明的效果是怎么做的啊,我想过是PS,,不过我不敢确定,因为我曾经的的确确看过这样的网站不是PS做的

这种效果要做很简单,做一个白色半透明的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的方法来实现背景半透明的功能,增加代码量不说,还要处理一些头疼的浏览器兼容问题。
温馨提示:内容为网友见解,仅供参考
第1个回答  2013-08-23
这个半透明的效果可以用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>
第2个回答  2013-08-23
这个可以用CSS控制的 有透明度控制,其实你也不需要问问题的,你可以直接看一下这个网站源码,又不是加密的 ,可以很清楚看到实现这个样式的方法。
第3个回答  2013-08-23
用png图片实现

这个效果怎么做出来的.CSS\/DIV
这种效果要做很简单,做一个白色半透明的png图片,然后把它作为文字所在的那个div的背景即可,这个比较简单,就不详细说明了。如果是用纯css来做的话,有几种做法:1、用rgba来定义 例如50%透明度的白色背景,在css里面可以这样定义它:background:rgba(255,255,255,0.5);前面三个数值是色彩的rgb值...

CSS DIV 怎么做出来鼠标移动上就显示其内容?
1、新建html文档,在body标签中添加一个div标签,然后在div标签中添加p标签,为p标签添加内容:2、为了方便演示,给div标签设置宽高和背景颜色,然后给p标签设置“display”属性,属性值为“none”,这样p标签中的文字默认情况下不会显示:3、给div设置hover伪类,当鼠标移动到div区域时,设置p标签的样式...

如何用CSS将DIV盒子呈现卡片翻转效果
首先要先建立两个盒子,当作卡片的正反面,这两个盒子通过定位来重叠放到一起。原理就是重叠的两个盒子同时进行旋转。要注意的地方是,下面的盒子需要先设置透明度来隐藏,不然一起旋转的时候视觉效果会很奇怪。接着给前后两个盒子,同时添加动画效果。上面的盒子旋转至90度时,透明度设置为0,同时下面的...

CSS DIV如何做这样的排版
1、选中DIVb2,点击右侧CSS选项卡下的+号,添加CSS样式定义。2、在新建CSS规则面板下选择#b2(对应DIV b2的ID),确定。3、在CSS规则定义面板左侧分类下选择方框,右侧输入对应的数值。b2的DIV定义好了 4、下面定义DIV001,同样选中DIV001,点+号新建CSS。5、在CSS规则定义下选择“背景”,选择好色彩...

div css 文字离顶部距15px怎么弄?
想要div css 文字离顶部距15px的效果非常简单。方法也有很多,可以直接改变文字的样式属性,也可以改变div的样式属性。这里介绍一种通过改变div的样式属性的方法。通过改变内边距padding-top。以下演示具体步骤:1、打开HTML文件编辑器,新建一个HTML文件,先添加HTML文件的基本标签元素。2、基本标签元素添加...

divcss布局设计?
如何用DIV+CSS进行网页样式布局一、选择“div标签”命令 打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对基简象】【div标签】命令,打开“div标签”对话框。二、输入div标签名称 1、在“ID”列表框中选择“top”2、单击“新建css规则”按钮准备进行css规则定义 三、新建css规则 在...

如何使用CSS实现DIV层的左下角、右下角圆角效果,以及右边和下边有阴影效...
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的<style>标签中,输入css代码:div{width: 300px;height: 150px;border: 3px solid blue;border-radius: 0 0 30px 30px;box-shadow: 0 7px 7px -7px #5E5E5E;} 3、浏览器运行index.html页面,此时实现了div...

div+ css滚动条怎样实现
如何向div添加滚动条 1、(高度和宽度根据需要设定)注意:如果只写高度,只有垂直滚动条,只写宽度,只有水平滚动条,所以什么都不写没有效果。同样在这里,overflow设置为auto,也就是说如果你的页面高度大于300px,就会有滚动条;如果小于300像素,就不会有滚动条。同样,如果宽度大于100px,则出现滚动条...

css如何将div居中显示css怎么让div居中显示
CSS实现div垂直居中的方法有很多。下面这些使div居中的方法在编写网页时经常用到,最常见的例子就是登录注册弹出框。方法一:使用绝对布局位置:absolutefordiv并设置top、left、right、bottom的值相等,但不一定都等于0;并设置边距:自动。方法二:这个方法需要知道div的宽度和高度。使用绝对布局位置:绝对用于...

这个是用css是怎样做出来的,如图红线内的效果,求具体代码
其实用不着js,纯css就可以,顶部的div和下面的内容其实是一个选项卡的功能,下面子菜单受顶部菜单鼠标移到上面的影响,激活属性,显示出来。具体我就不描述了,大致的框架和原理说一下(容器的宽度高度以及其他字体、背景之类的样式我就不写了):<style> .nav{display:none} .menu a:hover .nav{...

相似回答