`

css 设置元素背景为透明

css背景透明兼容 
阅读更多

 

要设置某一元素的背景为透明，在 chrome 、firefox、opera 下是这样的：

 

background-color: rgba(0, 0, 0, 0.4);

rgba 中的最后一个参数 0.4 就是想要的透明度，范围在0～1之间。

 

 

在 ie 中一般是这样的：

 

background-color: rgb(0, 0, 0);
filter: alpha(opacity=40);

opacity 表示透明度，它的值范围在 0～100 之间

 

 

那么如何兼容各浏览器呢？只要把它们写在一起就行了。

由于 ie 不支持 rgba，所以会忽略之。其他浏览器对于自己不支持的，一般也会忽略。

下面来个示例：

HTML 代码：

 

<body>
	<div class="non-transparent">
		aaaaa
		</div>
	</body>
	
<div class="transparent">
	<div class="box">
		box
		</div>
	</div>


CSS 代码：

 

 

.non-transparent:hover {
	background-color: yellow;
}

.transparent {
	position: absolute;
	top: 0;
	left: 0;
	
	text-align: center;
	
	width: 100%;
	height: 100%;
	
	filter: alpha(opacity=40);
	background-color: rgb(0, 0, 0);
	
	background-color: rgba(0, 0, 0, 0.4);
}

.box {
	background-color: yellow;
	width: 50%;
	height: 50%;
	
	position: relative;
	left: 5%;
	top: 10%;
}


显示效果：

 

chrome:


firefox:


opera:


ie8:


 

另外，在 chrome、firefox、opera 中也可以这样:

opacity: 0.4;

但是这样的话，会把所有子元素的透明度也设置为同样的值，效果如下图：


 

 

  • 大小: 2.3 KB
  • 大小: 58.9 KB
  • 大小: 28.9 KB
  • 大小: 5.2 KB
  • 大小: 56 KB
1
顶
7
踩
分享到：
| php 返回 json 为空 undefined 或者 失败 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css背景图片的背景裁切、背景透明度、背景变换等效果运用

    正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现，比如说CSS伪元素，他可以帮助我们模拟出这些CSS无法...

    CSS如何只改变父元素背景透明度不改变子元素透明度

    使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 （4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | ...

    CSS实现背景透明文字不透明的可行方法(兼容各浏览器)

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持 rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明...

    纯css实现内容下面的半透明层

    纯css手打，用before伪元素实现的一层半透明层，你可以看到下面的背景图，也可以看见上面内容，也就是他是在背景和内容之间的一层

    纯css实现背景图片半透明内容不透明的方法

    我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta cha

    H5 Canvas透明菱形元素背景特效.zip

    H5 Canvas透明菱形元素背景特效是一款基于canvas 2D画布制作多个三角形构成的菱形透明层元素背景动画特效。

    css 背景透明 元素(标签)背景透明的css设计

    完成后的效果 完成前后的效果应该是这样的：　背景透明前 背景透明后　tag部分的html应该是这样的： 复制代码代码如下:”tag”&gt; ”tag-bg”&gt;&lt;/span&gt; ”tag-font”&gt;拉萨&lt;/span&gt; &lt;/div&gt; tag部分的css应该是这样

    CSS和CSS3思维导图（xmind版）

    什么是CSS？ CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。 CSS 是用来表现HTML或...background(为一个元素指定多个背景)

    精通CSS+DIV网页样式与布局

    　第5章　用CSS设置网页中的背景　 　5.1　背景颜色　 　5.2　背景图片　 　5.3　背景综合一：我的个人主页　 　5.4　背景综合二：古词《念奴娇·赤壁怀古》　 　第6章　用CSS设置表格与表单的样式　 　6.1　控制...

    详解CSS3的opacity属性设置透明效果的用法

    主要介绍了详解CSS3的opacity属性设置透明效果的用法,同时还讲到了opacity透明度带有的继承性影响子集元素的问题,值得初学者注意,需要的朋友可以参考下

    《精通CSS+DIV网页样式与布局》光盘源码

    　第7章　用CSS设置页面和浏览器的元素　 　7.1　丰富的超链接特效 　7.2　鼠标特效 　7.3　页面滚动条　 　第8章　用CSS制作实用的菜单　 　8.1　项目列表　 　8.2　无需表格的菜单　 　8.3　菜单的横竖转换　 　...

    精通CSS.DIV.网页样式与布局 源码

    　第7章　用CSS设置页面和浏览器的元素　 　7.1　丰富的超链接特效 　7.2　鼠标特效 　7.3　页面滚动条　 　第8章　用CSS制作实用的菜单　 　8.1　项目列表　 　8.2　无需表格的菜单　 　8.3　菜单的横竖转换...

    精通CSS+DIV网页样式与布局视频教材

    第7章　用CSS设置页面和浏览器的元素 7.1　丰富的超链接特效 7.1.1　动态超链接 7.1.2　按钮式超链接 7.1.3　浮雕式超链接 7.2　鼠标特效 7.2.1　CSS控制鼠标箭头 7.2.2　鼠标变幻的超链接 7.3　...

    css入门笔记

    将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大；直到背景图片碰到某个边缘位置 5.背景图片固定 作用：将普片固定在网页在某个位置，一直在可视区域内，不会随着 ...

    使用css写带纹理渐变背景图的示例代码

    网站中背景色是纯色，如果我们需要渐变背景，就可以把纹理的背景色设置为透明色，然后把父元素的背景图设置为渐变效果~ html,body{ background: #000; min-width: 1024px; background-image: linear-gradient(to...

Magicbox
Global site tag (gtag.js) - Google Analytics