DIV背景半透明，DIV中的字不半透明

代码如下:<body bgcolor="#336699">

<div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="color:yellow">

复制代码图层背景半透明，字体颜色也半透明

代码如下:</span></div>

<div style="filter:alpha(opacity=50);background:#ffffff;width:600"><span style="position:relative;color:yellow">图层背景半透明，字体颜色不半透明</span></div>

复制代码*******带filter的层一定要有width属性，否则filter无效。********

我们可以用CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果。

例：

黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progidXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progidXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progidXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

DIV背景半透明文字不半透明的样式的更多相关文章

  1. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  3. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  4. 设置div背景透明的CSS样式

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  5. CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

    CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...

  6. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  7. CSS让div背景透明

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  8. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  9. IE DIV背景透明，点击事件不响应解决方案

    IE DIV背景透明,给DIV绑定点击事件, 当点击DIV时,不会响应已经绑定的点击事件. 解决方案是给DIV的设置以下样式. background-image: url(data:image/gif ...

随机推荐

  1. 【转载】【JQuery学习】jQuery插件开发

    JQuery做得最好的就是他的闭包和扩展性.超级简单的扩展方法,让更多的人可以轻松的开发定制自己的jQuery插件.下面的东西是转载过来当做学习材料的.虽然貌似有点古老,但是jQuery的变更一直都不 ...

  2. struts使用html:file上传文件的时候文件名乱码解决

    <body> <html:form action="/jwid/struts1x/15.3/form/upload.do?action=upload" encty ...

  3. Myeclipse 2014 javascript 添加 jquery 代码提示

    近日在写js,在myeclipse中没有jquery代码的提示着实不方便,在网上使用度娘搜索添加提示方式,试了多种,现经测试以下方式可取. 1.打开help菜单下的install from site. ...

  4. mtk Android 编译命令自定义--添加版本号

    1. alps\build\core\Makefile文件:(参照CUSTOM_BUILD_VERNO) ifeq "" "$(SURPLUS_BUILD_VERNO)& ...

  5. JUnit 4

    本文是转载的, 主要介绍 Junit 4 ( 搭建在 eclipse 中 ) JUnit4 初体验 Eclipse: 下载 Ant, 基于java的开源构建工具, 你可以在 http://ant.ap ...

  6. 从svn检出的项目如何编译

    从svn检出的项目如何编译   svn检查项目后,不能构建编译 工程右键,bulid path -->No actions available   问题:svn检查项目后,发现没有class文件 ...

  7. 适用于Firemonkey的Json解析对象XsuperObject使用方法介绍

    XSuperObject是适用于FileMonkey平台的JSON解析组件,能够在Android,IOS,MACOS,WINDOWS等多个平台使用 点击下载 Sample JSON { "n ...

  8. core--线程同步

    [同步(tóng bù)synchronous;sync;synchronism;synchronization 指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系.]这是百度百科对&quo ...

  9. android 单词

    inflate: 胀, 膨, 通货膨胀, 膨胀系数

  10. POJ 2236 (简单并查集) Wireless Network

    题意: 有n个电脑坏掉了,分别给出他们的坐标 有两种操作,可以O x表示修好第x台电脑,可以 S x y表示x y是否连通 两台电脑的距离不超过d便可连通,两台电脑是连通的可以直接连通也可以间接通过第 ...