怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。
<div class="box"></div>
<style>
.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}
</style>
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码,当opacity值为1时,表示完全不透明,为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3;这是“最重要的”,因为它是在CSS的现行标准。这将在Firefox,Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。
filter:alpha(opacity=30);这一个是针对IE浏览器
-moz-opacity:0.3;你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。
-khtml-opacity: 0.3;这是旧版本的Safari(1.×)当渲染引擎是使用仍被称为kthml,而不是目前的WebKit。

css中如何设置透明度的更多相关文章

  1. css中怎么设置透明度的问题

    小伙伴们是不是在找怎么样去设置页面的透明度的方法呢...别找了,我这儿就有,而且肯定够用了. 我自己会用到的就有两种,可以和大家分享一下. 1.用opcity的方法去设置透明度.代码如下: .div ...

  2. css中filter:alpha透明度使用

    css中filter:alpha透明度使用    使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示 ...

  3. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  4. CSS中怎么设置元素水平垂直居中?

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  5. CSS中水平居中设置的几种方式

    1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...

  6. css中absolute设置问题和如何让div居中

    今天设置多个div到页面正中间的时候,在第一层<div class="map">中设置如下: .map{ position:absolute: top:50%; lef ...

  7. css中hover设置边框后div中内容后移解决方法

    <style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...

  8. css中display设置为table、table-row、table-cell后的作用及其注意点

    html: <div class="table"> <div class="row"> <div class="cell ...

  9. css中,设置百分比后,让百分比的宽度包括padding和border来计算

    *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

随机推荐

  1. Smack编程库进行代码功能调试

    http://www.tuicool.com/articles/U3Afiy 使用Smack编程库进行代码功能调试 关于Smack编程库,前面我们提到,它是面向Java端的api,主要在PC上使用,利 ...

  2. codeforces 659D D. Bicycle Race(水题)

    题目链接: D. Bicycle Race time limit per test 1 second memory limit per test 256 megabytes input standar ...

  3. Python 微信通知 先挖个坑

    桑心病狂,试试把报警信息发到微信上 原文  https://segmentfault.com/a/1190000009717078  

  4. gulp记录

    npm install gulp -g //全局安装gulp gulp -v //此处若有问题,配置环境变量,npm config get prefix得到路径 npm init //新建nodejs ...

  5. python之django入门

    一.搭建开发环境 使用virualenv创建虚拟python环境 pip install virtualenv [root@master djiango]# find / -name virtuale ...

  6. python 动态添加属性及方法及“__slots__的作用”

    1.动态添加属性 class Person(object): def __init__(self, newName, newAge): self.name = newName self.age = n ...

  7. Java远程调用

    一.  概念: RMI全称是Remote Method Invocation-远程方法调用,其威力就体现在它强大的开发分布式网络应用的能力上,是纯Java的网络分布式应用系统的核心解决方案之一.它支持 ...

  8. SQL 优化总结(二) 索引

     索引 1.索引的建立 缺省情况下建立的索引是非群集索引,但有时它并不是最佳的:合理的索引设计要建立在对各种查询的分析和预测上. 一般来说: (1) 有大量重复值.且经常有范围查询(between, ...

  9. 你所不知道的html5与html中的那些事(四)——文本标签

    文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...

  10. java&nbsp;POP3

    package com.skyzoo.Jutil; import java.io.BufferedReader; import java.io.IOException; import java.io. ...