在CSS中设置透明度的俩种方法

这次给大家带来在CSS中设置透明度的俩种方法,在CSS中设置透明度的注意事项有哪些,下面就是实战案例,一起来看一下。

1.使用rgba设置背景色的透明

效果如下:

    

你好啊!

body { background-color:red;}#box{ width:200px; height:200px; margin:100px auto; text-align:center; line-height:200px; color:white; background-color:rgba(182,255,0,.5);}

登录后复制

在CSS中设置透明度的俩种方法

2.使用opacity设置背景色的透明

#box{    width:200px;    height:200px;    margin:100px auto;    text-align:center;    line-height:200px;    color:white;    background-color:rgb(182,255,0);    opacity:0.5;}

登录后复制

在CSS中设置透明度的俩种方法

总结:通过2中效果的比较我们发现opacity会同时影响字体的透明度

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

注意事项

注意事项

以上就是在CSS中设置透明度的俩种方法的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2898893.html

(0)
上一篇 2025年3月10日 23:39:34
下一篇 2025年3月6日 03:26:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 用CSS实现JS的效果

    这次给大家带来用CSS实现JS的效果,用CSS实现JS的注意事项有哪些,下面就是实战案例,一起来看一下。 1. 纯CSS Tooltip  许多网站还是在注意事项来创建Tooltip效果,但实际上通过CSS能更简单的实现。最简单的方法是在你…

    2025年3月10日
    200
  • CSS实现自适应导航菜单

    这次给大家带来CSS实现自适应导航菜单,CSS实现自适应导航菜单的注意事项有哪些,下面就是实战案例,一起来看一下。 以下是一个简单实例,可以通过学习了解响应工菜单的制作。 html Portfolio Illustration Web De…

    编程技术 2025年3月10日
    200
  • 用css3实现圆圈进度条

    这次给大家带来用css3实现圆圈进度条,用css3实现圆圈进度条的进度条有哪些,下面就是实战案例,一起来看一下。 在开发微信小程序的时候,遇到圆形进度条的需求。使用canvas绘图比较麻烦: 1、为了实现在不同屏幕上面的适配,必须动态的计算…

    2025年3月10日
    200
  • css3的边框属性如何使用

    这次给大家带来css3的边框属性如何使用,使用css3边框属性的css3边框有哪些,下面就是实战案例,一起来看一下。 CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么C…

    2025年3月10日 编程技术
    200
  • CSS优先级计算的底层规则

    这次给大家带来CSS优先级计算的底层规则,CSS优先级计算底层规则的CSS优先级有哪些,下面就是实战案例,一起来看一下。 最近在学习CSS优先级计算的规则这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 CSS的权重 一、CSS…

    编程技术 2025年3月10日
    200
  • CSS之巧用渐变

    这次给大家带来CSS之巧用渐变,CSS使用渐变注意事项有哪些,下面就是实战案例,一起来看一下。 前言 本文主要分享了关于CSS3中linear-gradient和radial-gradient的相关知识,带给大家使用渐变的另一个角度。感兴趣…

    2025年3月10日 编程技术
    200
  • 详解CSS之margin的特殊使用技巧

    这次给大家带来详解CSS之margin的特殊使用技巧,详解CSS之margin特殊使用技巧的注意事项有哪些,下面就是实战案例,一起来看一下。 一、简介 margin我们一般习惯的叫它外边距,分别可以设置四个方向的外边距,这里不再赘述赋值语法…

    2025年3月10日
    200
  • CSS3的filter(滤镜)属性详解

    这次给大家带来CSS3的filter(滤镜)属性详解,使用CSS3的filter(滤镜)属性的注意事项有哪些,下面就是实战案例,一起来看一下。 最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋…

    2025年3月10日 编程技术
    200
  • CSS的checkbox效果使用详解

    这次给大家带来CSS的checkbox效果使用详解,使用CSS的checkbox注意事项有哪些,下面就是实战案例,一起来看一下。 实现思路 纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的inp…

    编程技术 2025年3月10日
    200
  • 用css3画个同心圆

    这次给大家带来用css3画个同心圆,用css3画个同心圆的注意事项有哪些,下面就是实战案例,一起来看一下。 基本思路 首先你得画三个圆吧,那三个圆怎么重叠到一块呢?这个就得靠-margin来控制了。 登录后复制 css #t1 { floa…

    2025年3月10日
    200

发表回复

登录后才能评论