CSS实现Div层背景半透明而内容不透明的效果

2024-04-12 21:10:07

CSS实现Div层背景半透明而内容不透明的效果

2014年5月18日 MK 前端设计 0 阅读 2932次

前几天有一个学弟问我，怎么样能实现Div层背景半透明而内容不透明的效果呢，他写的效果不管怎么调试都是div层里面的内容是透明的。我想了一下，用浮动层可以做到啊，下面是代码：

<title>透明</title>
<head>
<style>
body{
background: #40ed90;
}
#container {color: #154BA0;background: #ff0000;filter: Alpha(Opacity=10, Style=0);opacity: 0.10;position: absolute;height: 200px;width:500px;z-index:20;
}#text {position: absolute;height: 200px;width:500px;text-align:center;z-index:30;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>

代码预览

<title>透明</title>
<head>
<style>
body{
background: #40ed90;
}
#container {
color: #154BA0;
background: #ff0000;
filter: Alpha(Opacity=10, Style=0);
opacity: 0.10;
position: absolute;
height: 200px;
width:500px;
z-index:20;
}
#text {
position: absolute;
height: 200px;
width:500px;
text-align:center;
z-index:30;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>

CSS实现Div层背景半透明而内容不透明的效果相关推荐

CSS中如何制作背景图片半透明但内容不透明的效果
CSS中如何制作背景半透明但内容不透明的效果一.利用伪元素:before添加一个半透明的背景,并利用position定位属性,设置z-index值为-1,显示在下层. css: <style& ...
CSS -- 实现DIV层背景颜色渐变（兼容IE 火狐谷歌浏览器）
CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐谷歌浏览器) FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType= ...
【转】js控制div层背景半透明
var container = document.getElementById("map"); container.style.filter = "progid:DXIm ...
纯css实现背景图片半透明，内容不透明
前言最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示半透明不透明常见的失败做法最常见的做法事设置元素的opacity,这种设置出 ...
html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果一.常见的错误做法最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
php如何设鼠标经过颜色,jQuery实现鼠标滑过Div层背景变颜色的方法
本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: jQuery实现感应鼠标经过Div层变换图层背景颜色) .divbox{ height:300 ...
html如何设置背景半透明,css中如何设置背景半透明
css中设置背景半透明效果可以使用opacity属性,该属性用来设置元素的不透明级别,如[opacity:0.5],表示将元素设置为半透明状态. 本文操作环境:windows10系统.css 3.th ...
html颜色半透明效果,CSS来实现网页背景半透明
DIV半透明实现,应用CSS实现DIV成半通明成效,CSS实现层和后台半透明成效. 一.DIV CSS半透明根本引见设置装备摆设DIV半通明CSS代码: div{filter:alpha(Opaci ...

最新文章

热门文章