脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：主页> 网页制作> CSS> CSS教程> css背景透明度

CSS设置背景透明度、16进制色值设置透明度的方法

  发布时间：2024-06-25 16:34:26  作者：用户11  我要评论
这篇文章主要介绍了CSS设置背景透明度、16进制色值设置透明度的方法,本文给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧

1、rgba（推荐）

（rgba与rgb区别：rgb和rgba都表示颜色。
        rgb： 代表 红 绿 蓝 三种颜色
        rgba： 在rbg的基础上加了 “alpha” 透明度，取值在0-1之间。）

background: rgba(0,0,0,0.4);

2、rgb( 0 0 0 /x%)  这是之前写样式用的格式，也可以渲染成功 

background: rgb(0 0 0 /40%);

 3、十六进制色值，在16进制色值后直接加两位数字，作为透明度

同样取值在0~255，那么如果想设置透明度为0.5，就要加255的一半，大约用128，搜一个进制转换工具，转换出来16进制数是80

在我们想要加透明度的色值后面直接加上80即可

 4、opacity， 取值在0-1之间，值越小越透明

但子元素会继承父元素的透明度，即使在设置子元素opacity，也是在父元素opacity基础上设置，使用场景非常有限

到此这篇关于CSS设置背景透明度、16进制色值设置透明度的文章就介绍到这了,更多相关css背景透明度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • CSS中背景图片透明度问题小结

    今天使用CSS设计一个后台页面，在插入背景图片后，设置透明度时，发现使用opacity设置透明度时，里面的文字内容也会随着背景一起变透明，今天给大家分享实例代码，感兴趣的
    2024-06-25

  • 详解CSS-opacity子元素继承父元素透明度的解决方法

    这篇文章主要介绍了详解CSS-opacity子元素继承父元素透明度的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面
    2020-09-08

  • 详解css透明度之rgba和opacity的区别及兼容

    对于设置透明度，我们有两个可以选的css3属性：rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容，感兴趣的可以一起跟随小编来了解一下
    2019-01-10

  • CSS鼠标点击改变图片透明度

    这篇文章主要为大家详细介绍了CSS鼠标点击改变图片透明度，为大家提供改变图片css透明度属性的简单方法，感兴趣的小伙伴们可以参考一下
    2016-03-08

  • CSS3中的Opacity多浏览器透明度兼容性问题

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持，不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari
    2015-11-09

  • CSS如何只改变父元素背景透明度不改变子元素透明度

    使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看
    2014-10-17

  • css中filter:alpha透明度使用小结兼容IE、火狐

    使用Alpha可以设置透明度，FILTER:alpha在IE下是没有问题的，要支持firefox就需要使用-moz-opacity，下面有个不错的示例，大家可以参考下
    2014-03-27

  • CSS样式设置元素的透明度以50%为例

    CSS样式设置元素的透明度的方法有很多，不过兼容各种浏览器就屈指可数了，下面以将透明度设置为50%举例，向大家介绍下，感兴趣的朋友不要错过
    2013-10-12

  • CSS 图像透明度opacity兼容性介绍

    CSS 图像透明度opacity想必大家并不陌生吧，使其可以让图片或者页面拥有透明效果，下面为大家讲解下CSS opacity的使用及其兼容性，感兴趣的朋友可以参考下
    2013-09-08

  • 用CSS实现的图片透明度链接效果代码

    一款使用CSS的Alpha透明度实现的图片链接效果，鼠标放上后图片会变为半透明，然后出现文字介绍，+可以加入其它功能，一般是加入收藏，根据你的需要了，可以自己改
    2011-12-20

最新评论