html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例

当我们在做网页的时候，有时为了整体页面搭配的美观，需要设置层样式为透明或者半透明，因为透明往往能产生不错的网页视觉效果。在使用的背景的页面中，如果不设置页面内容区为半透明状态，突出不了背景的作用，也显得不那么协调。用传统的CSS实现背景半透明效果的方法是用两个层，一个放文字，另一个做透明背景，但是透明滤镜的效果会影响到里面的内容。如果只需要在IE下实现，是有更简单的方法可以实现的。

CSS半透明属性

兼容主流浏览器的CSS透明代码:

.transparent_class {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

上面的几个属性分别是:

①opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.

②filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.

③-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。

④-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

CSS透明度继承问题

CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如下图的效果:

即使你又为子元素指定透明度为1也是无效的。

对于子元素是文字的情况，一般的解决方法是如果多少还能够看清，就不管。另一个折中的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。

还有“取消透明度继承”的说法，这个说法是不太准确的，实际上没有任何取消透明度继承的方法。只能说，当想要实现“多个元素覆盖，只让指定的元素透明”时，可以使用的一些Hack。

还有一种不错的实现方法：添加一个空元素作为透明层，和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位，实现覆盖。具体解释说明请点击本链接

IE下实现半透明

HTML代码：

背景为红色(#FF0000)，透明度20%。

html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例相关推荐

css中如何设置hr的样式？css hr标签多种样式（图文）
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
Android Studio中如何设置颜色拾色器工具
Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...
html中如果设置颜色为半透明状态,css如何利用transparent属性设置透明度？
那么,大家是不是会问csstransparent属性是什么,有什么用? 其实,csstransparent是一种全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值:是用来指 ...
style 标签中动态设置颜色
[需求描述] 主题颜色存在$store中,动态使得部分文字跟随主题颜色 [实现效果] (主题颜色为蓝色,文字颜色跟随主题) (主题颜色为紫色,文字颜色跟随主题) [实现方式] 1.从项目中取出获得到 ...
html设置外边距不合并,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好办法 ...
http参数自动转换java接口参数设置_Springmvc请求参数类型转换器及原生api代码实例...
一.springmvc的xml配置文件 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context=&q ...
emWin默认皮肤下重新设置颜色
emwin使用了默认皮肤之后就不能够容易的重新设置颜色.这边我提供一种解决的方法,以button为例子. 正常设置皮肤BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);后 ...
JavaScript如何给Table行设置颜色？
1.首先,在CSS文件中定义要设置的颜色.比如, .resetrowscolor { background-color: red; } 2.在要显示的页面中引入该CSS文件,比如 <li ...
easyui textbox 设置只读不可编辑状态
在使用easyul的时候,发现输入框内容及不容易获取与设置,用jQuery的方式大部分失效.依稀记得好像是因为easyul会在原页面的基础上,生成了一些新的独有样式,并且暂时覆盖掉使用了easyul的 ...
iOS-UITextField中给placeholder动态设置颜色的四种方法
思路分析: 0.自定义UITextField 1.设置占位文字的颜色找-->placeholderColor,结果发现UITextField没有提供这个属性 2.在storyboard/xib中 ...

html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例

html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例相关推荐

最新文章

热门文章