css中如何设置透明度
怎样在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中如何设置透明度的更多相关文章
- css中怎么设置透明度的问题
小伙伴们是不是在找怎么样去设置页面的透明度的方法呢...别找了,我这儿就有,而且肯定够用了. 我自己会用到的就有两种,可以和大家分享一下. 1.用opcity的方法去设置透明度.代码如下: .div ...
- css中filter:alpha透明度使用
css中filter:alpha透明度使用 使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示 ...
- CSS中如何设置父元素透明度不影响子元素透明度
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...
- CSS中怎么设置元素水平垂直居中?
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...
- CSS中水平居中设置的几种方式
1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...
- css中absolute设置问题和如何让div居中
今天设置多个div到页面正中间的时候,在第一层<div class="map">中设置如下: .map{ position:absolute: top:50%; lef ...
- css中hover设置边框后div中内容后移解决方法
<style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...
- css中display设置为table、table-row、table-cell后的作用及其注意点
html: <div class="table"> <div class="row"> <div class="cell ...
- css中,设置百分比后,让百分比的宽度包括padding和border来计算
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
随机推荐
- Jmeter-聚合报告
线程组右键--添加--监听器--聚合报告 Aggreagete Report:jmeter最常用的一个Listener,“聚合报告”. Label:每个jmeter的element(例如HTTP Re ...
- 1026 Table Tennis (30)(30 分)
A table tennis club has N tables available to the public. The tables are numbered from 1 to N. For a ...
- 【Lintcode】099.Reorder List
题目: Given a singly linked list L: L0 → L1 → … → Ln-1 → Ln reorder it to: L0 → Ln → L1 → Ln-1 → L2 → ...
- Virtualenwrapper
1. Introduction Virtualenvwrapper is a set of extensions to Ian Bicking's virtualenv tool. The exten ...
- 使用superobject 解析Json数据
接口数据有如下规范{"error": 0, "msg": "", "data": ...} 其中数据data类型不确定. ...
- selenium 点击页面链接测试
点击页面链接测试 http://www.51testing.com/html/21/n-862721.html 需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口 ...
- Git 分支管理 多人协作 远程仓库 补充
当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了, 并且,远程仓库的默认名称是origin. 如果是本地仓库关联远程仓库 --- 要查看远程库的信息,用 ...
- SAS批量导出sas7bdata至excel
/*创建输出excel的宏*/ %macro export(inlib,intbl,outpath,outfile); proc export data=&inlib..&intbl ...
- ZOJ2898【折半搜索】
题意: 给出一系列值和对应的陷阱,对于陷阱如果存在两个就抵消,求价值最大. 思路: 折半枚举,利用异或 #include <bits/stdc++.h> using namespace s ...
- Python中生成随机数
目录 1. random模块 1.1 设置随机种子 1.2 random模块中的方法 1.3 使用:生成整形随机数 1.3 使用:生成序列随机数 1.4 使用:生成随机实值分布 2. numpy.ra ...