css如何设置透明度不会影响子元素

css如何设置透明度不会影响子元素

通过RGBA设置透明度,只有最新的浏览器支持,支持IE9+,可通过RGBA的alpha通道的方式设定。

(推荐教程:CSS教程)

显示文字

前三个值是rgb的颜色值,最后一个透明度的值,取值为0~1,值越小越透明。

兼容所有浏览器写法:

立即学习“前端免费学习笔记(深入)”;

background-color:rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);

注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。

其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。

RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

(视频教程推荐:css视频教程)

2位透明度的换算方法:x=alpha*255 ,将计算的结果 x 转换成十六进制即可。

js换算16进制方法: x.toString(16)

例如:上面的 0.25 透明度,换算为IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

举例:

body{margin:0;padding:0;}.div_content{    background: url("1.gif") no-repeat;    /*给input框添加背景图片,以凸显其透明效果。*/    width: 200px;    height: 200px;}.div_content>input{    outline: none;    border: none;    background-color: transparent;    /*必须将背景色设为透明,否则无效。(除非对于要设置的元素本身已经是透明的,如:span元素等)*/    background-color: rgba(0,0,0,0.25);    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);}    

以上就是css如何设置透明度不会影响子元素的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615715.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:03:02
下一篇 2025年12月24日 05:03:10

相关推荐

  • 在html元素中设置css样式的方式是什么

    如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置”id” 和 “class”选择器。 (推荐教程:CSS教程) 下面我们来分别说一下id选择器和class选择器。 id选择器 立即学习“前端免费学习笔记(深入)”; id 选择器可以…

    好文分享 2025年12月24日
    000
  • css怎样实现DIV高度自适应

    可以添加表格特性。 (推荐教程:CSS教程) 父级元素添加属性  display: table; 子一级元素添加属性 display: table-cell; 立即学习“前端免费学习笔记(深入)”; 代码: .div-row { width: 400px; border: 1px solid #23…

    2025年12月24日 好文分享
    000
  • css中的五种常见页面布局

    公共样式部分代码: (推荐教程:CSS教程) html * { margin: 0; padding: 0; } .layout { margin-bottom: 20px; } .layout article { width: 100%; } .layout article > div { …

    2025年12月24日 好文分享
    000
  • 利用css实现鼠标悬停效果

    我们先来看下效果: (推荐教程:CSS教程) html代码: 立即学习“前端免费学习笔记(深入)”; 这是是pic-1 这是是pic-2 这是是pic-3 css代码: html { box-sizing: border-box; font: 18px PT Mono; background: an…

    2025年12月24日
    000
  • css如何实现按钮居中显示

    先来看下效果: (推荐教程:CSS教程) 通过简单的Css样式就可以实现 立即学习“前端免费学习笔记(深入)”; 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto…

    2025年12月24日
    000
  • CSS如何清除浮动?3种方法介绍

    css如何清除浮动?本篇文章给大家介绍一下使用css清除浮动的3种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 首先这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。 下面我就讲三种常用清除浮动的方法,够用了。 1、在浮动元素后面加一个空的div,并为它清除浮动 立即学…

    2025年12月24日 好文分享
    000
  • 如何利用css实现圆环效果

    css实现圆环效果有多种方法,这里为大家分享五种方法: (推荐教程:CSS教程) 首先我们来看一下实现效果: 立即学习“前端免费学习笔记(深入)”; 接下来为大家介绍方法: 1、两个标签的嵌套 .element1{ width: 200px; height: 200px; background-co…

    2025年12月24日
    000
  • 书写CSS样式有哪三种方式

    书写css样式的三种方式: (推荐教程:CSS教程) 一、行内式 是通过标签的style属性来设置元素的样式,其基本语法格式如下: 立即学习“前端免费学习笔记(深入)”; HelloWord 语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式,其中属性值的书写规…

    2025年12月24日
    000
  • 纯CSS如何实现3D书本效果?(代码示例)

    本篇文章给大家通过代码示例介绍css实现3d书本效果,代码简单易懂。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 话不多说,先来看一下效果图 源代码如下 Document *{ margin: 0; padding: 0; } body{ display: flex; align…

    2025年12月24日
    000
  • 详解CSS中的选择器和优先级

    CSS选择器优先级得关系为: !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 1、内联样式表的权值最高 () 权值为1000 2、统计选择符中的ID属性个数。(#id) 权值为100 立即学习“前端免费学习笔记(深入)”; 3、统计选择符中的C…

    2025年12月24日 好文分享
    000
  • css中有哪些常见的布局方式

    常见的几种布局方式: (推荐教程:css快速入门) 固定布局 流式布局(自适应布局) 弹性布局(伸缩布局) 立即学习“前端免费学习笔记(深入)”; 定位布局 浮动布局 响应式布局(媒体查询) 固定布局的固定说的是盒子的宽高都是固定的。margin,padding等。 流式布局的流式是指的盒子的宽高和…

    2025年12月24日
    000
  • css中的display属性有哪些值?各有什么作用?

    display属性值介绍: (推荐教程:css快速入门) none    此元素不会被显示。     block    此元素将显示为块级元素,此元素前后会带有换行符。     inline    默认。此元素会被显示为内联元素,元素前后没有换行符。     立即学习“前端免费学习笔记(深入)”; …

    2025年12月24日
    000
  • css如何实现圆角内凹效果

    实现思路: (推荐教程:css快速入门) 两个并排的div,在第二个div内定义一个2倍宽高的名为item,对item进行设置border-radius: 50%,再对其进行绝对定位。 代码实现: Title .box { width: 50px; height: 50px; overflow: h…

    2025年12月24日
    000
  • css如何实现蒙版效果

    重要知识点: (推荐教程:css快速入门) background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6; 样式: .back {background:url(images/coupon-logo.gif) no-repeat;} .top {…

    2025年12月24日
    000
  • css中伪类和伪元素有什么区别

    一、定义区别 (推荐教程:css快速入门) 伪类 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如 :visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:…

    2025年12月24日
    000
  • css清除浮动的原理介绍

    首先我们要知道clear:both是清除浮动的关键。 (推荐教程:css快速入门) clear是CSS中的定位属性,规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。 clear属性只能在块级元素上其作用,这就是清除浮动样式中display:block的…

    2025年12月24日 好文分享
    000
  • CSS Flex 的用途详解

    一、可以利用flex来布局一个p在另一个p里面水平垂直居中 如:html代码:  css代码: .container{width:600px;height:400px;border:1px solid blue;display: flex;justify-content:center;align-i…

    2025年12月24日
    000
  • CSS 实现三栏自适应布局

    所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,…

    2025年12月24日
    000
  • css中的伪元素有什么作用

    伪元素可以用来添加一些选择器的特殊效果。 (推荐教程:css快速入门) 语法: selector:pseudo-element {property:value;} 举例: 1、”first-line” 伪元素用于向文本的首行设置特殊样式。 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日
    000
  • CSS 中 @ 用法详解

    at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。 常规规则 常规规则遵循下面的语法: 代码如下: 立即学习“前端免费学习笔记(深入)”; …

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信