css 背景色半透明 子元素不透明

方法一:

背景色用rgba表示  兼容各个浏览器 ie8:

通过!important与filter:alpha(opacity=透明值)的结合使用即可解决;例如 background-color:#f9f1f1; background:rgba(249, 241, 241, 0.85) !important;filter:alpha(opacity=85)。

方法二:

背景色用background-color:#000;

子元素放在父div外面的div,通过定位显示在父div上面:

<div class="parent"></div>

<div class="child">子元素</div>

css:

.parent{width:500px ;height:300px; background-color:#000; opacity:0.5; position:relative;}

.child{font-size:20px;color:blue; position:absolute; top:100px; left:200px; font-family:"微软雅黑";}

时间: 2024-10-01 23:15:42

css 背景色半透明 子元素不透明的相关文章

如何使父元素透明,子元素不透明

以下内容转自:http://www.wfuns.com/?p=142 当我们在使用opactity 属性给DIV设置半透明度的时候,DIV下的子元素(标签和文字)都会继承父元素的透明度属性,并且无论我们重置子元素的透明度属性情况都不会发生变化,而这往往不是我们想要看到的效果. 代码设置如下: //样式 <style type=”text/css”> .father{height:400px;filter:alpha(opacity=90);-moz-opacity:0.9; -khtml-op

css 选择器之子元素

/*html*/ <div class="wrap"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> /*css*/ .wrap{ display:table; width: 200px; } .wrap span{ display:table-cell; text-align:c

CSS选择器(子元素和后代元素选择器)

元素之间的关系 父元素:直接包含子元素的元素 子元素:直接被父元素包含的元素 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素 后代选择器 作用:选中指定元素的指定后代元素 语法:祖先元素 后代元素{ }(中间有空格) 子元素选择器 作用:选中指定父元素的指定元素(此方法使用不多) 语法:父元素 > 子元素 原文地址:https://www.cnblogs.com/XiaMengJ

CSS 选中奇偶子元素

<style> #Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin-left: 10px;}偶数行 <style> <ul id="Ulist"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> &

背景色半透明,字体不透明

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

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背 景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这 样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

【css】float:left不撑满容器与opacity将子元素透明demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

目的需要,需要一个背景半透明的效果,于是马上想到"opacity:0.5″等等,为兼容IE可能还会用到filter,如: filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 上面的是可以达到半透明的效果,但是会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这不是我想要的 上英文google.com翻阅半天,稍加总结和修改,终于功夫不负有心人,实现了可以兼容各浏览器,达到背景颜色半透明而不影响子元素的代码,如下: bac

css的经典问题:父元素下的子元素越界问题?

CSS的经典问题一:父元素下第一个子元素的margin-top越界问题以及末个子元素margin-bottom的越界问题? 1. 为父元素加边框,防止子元素延伸.副作用是边框:2. 将margin换做padding:副作用是padding-top的值要加padding:3. 父元素overflow,副作用是将溢出部分隐藏掉可能不满足需求:4. 将父元素的第一个元素之前加一个无高度的table元素,无副作用!!! .parent:before{ content:' '; display:table