给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50);

我们通常也会遇到,在给父元素背景设置透明度时,子元素内容继承了父元素的透明度。

如何让子元素脱离父元素的透明度?有如下几种方法:

1.父元素div,直接使用透明度的图片做背景。

2.父元素div(设置为相对定位),兄弟div1(设置为绝对定位)背景正常加透明度即可,兄弟div2(设置为绝对定位),层级关系高于div1即可。

3.利用CSS3属性rgba(即red+green+blue+alpha的颜色),例如 outline: 0px; padding: 0px; margin: 0px 0px 16px; font-size: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">但是IE7/8不支持此属性,可按如下方法写:

父元素div要写如下:background-color: #000;filter:Alpha(opacity=50);

子元素div加个定位position:absolute/relative即可。

css 只改变父元素的透明度,不改变子元素透明度rgba+opacity的更多相关文章

  1. CSS只改变背景透明度,不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...

  2. css只改变input输入框光标颜色不改变文字颜色实现方法

    input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...

  3. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  4. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  5. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  6. 将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值,就可移动四个按钮

      将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值, 就可移动四个按钮               https://www.evernote.com/shard/s227/sh/78 ...

  7. css如何让父元素下的所有子元素高度相同

    小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...

  8. CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  9. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

随机推荐

  1. lua学习:lua中“类”的实现

    在之前的面试遇到考用lua实现类的题目.现在就补补这块知识点. 我们都知道Lua中的table是一个对象.拥有状态,拥有self,拥有独立于创建者和创建地的生命周期. 一个类就是一个创建对象的模具.L ...

  2. EF Power Tools使用介绍

            EF Power Tools可以从数据库反向生成实体及映射文件.一般在使用EF,有Database First,Code First以及Model First.常用的是Database ...

  3. 一些LR的经验,讲的还不错

    https://blog.csdn.net/Dinosoft/article/details/50492309 记录一下.

  4. DICOMDIR结构

    DICOMDIR文件结构: 格式: DICOMDIR文件遵照DICOM文件的存储格式,需要有128个无意义字节的前言(假如没有特殊要求,这些字节都为00H),紧接着是DICOM前缀(长度为4字节的“D ...

  5. c:forEach实现换行

    Map<String,String> map = new TreeMap<String,String>(); map.put("key1", "v ...

  6. Sqlite-SQLiteHelper类,操作SQLite数据库

    using System; using System.Data; using System.Text.RegularExpressions; using System.Xml; using Syste ...

  7. Libsvm和Liblinear的使用经验谈

    原文:http://blog.sina.com.cn/s/blog_5b29caf7010127vh.html Libsvm和Liblinear都是国立台湾大学的Chih-Jen Lin博士开发的,L ...

  8. [Functional Programming] Unbox types with foldMap

    Previously we have seen how to use Concat with reduce: ), Sum(), Sum()] .reduce((acc, x) => acc.c ...

  9. UI设计经常使用站点

    前期:http://www.zcool.com.cn/ 中期:http://www.ui.cn/ 后期:https://dribbble.com/

  10. POI生成EXCEL文件(字体、样式、单元格合并、计算公式)

    创建一个封装类: package com.jason.excel; import java.io.FileNotFoundException; import java.io.FileOutputStr ...