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;}
随机推荐
- 使用gdb调试c/c++代码
转自 http://blog.csdn.net/haoel/article/details/2879 GDB概述———— GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较 ...
- Python实现排序算法之快速排序
Python实现排序算法:快速排序.冒泡排序.插入排序.选择排序.堆排序.归并排序和希尔排序 Python实现快速排序 原理 首先选取任意一个数据(通常选取数组的第一个数)作为关键数据,然后将所有比它 ...
- 三:JMS消息服务规范
一:JMS是什么?--->JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API--->用于在两个应用程 ...
- hdu畅通工程
传送门 畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- 【Lintcode】017.Subsets
题目: 题解: Solution 1 () class Solution { public: vector<vector<int> > subsets(vector<in ...
- 如何加快建 index 索引 的时间
朋友在500w的表上建索引,半个小时都没有结束.所以就讨论如何提速. 一.先来看一下创建索引要做哪些操作:1. 把index key的data 读到内存==>如果data 没在db_cache ...
- poj2279排队——杨氏矩阵与钩子公式(DP爆内存)
题目:http://poj.org/problem?id=2279 书上的DP做法会爆内存,尝试写了一个,过了样例. 转载: 代码如下: #include<iostream> #inclu ...
- Oracle日期范围
一.SQL语句: select to_date(to_char(to_date('2017-10-01', 'yyyy-mm-dd') + rownum - 1, 'yyyy-mm-dd'), 'yy ...
- 按钮交互loading ---- 转圈圈 加载
按钮loading状态自定义选项(功能): 可以在元素上添加 data-am-loading 来设置选项: spinner 加载动画图标,适用于支持 CSS3 动画.非 input 元素,写图标名称即 ...
- IOS深入学习
iOS超全开源框架.项目和学习资料汇总(1)UI篇 iOS超全开源框架.项目和学习资料汇总(2)动画篇 iOS超全开源框架.项目和学习资料汇总(3)网络和Model篇 数据库 FMDB – sqlit ...