html5 css3 颜色表示和透明度设置

蕉风夜雨

于 2016-02-13 21:16:34 发布

阅读量3.5w

点赞数 1

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/qqq_11101/article/details/50659839

版权

html5 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了HTML5和CSS3中颜色的表示方法，包括RGB、RGBA、HSL、HSLA等，并详细阐述了如何设置颜色的透明度，通过实例展示了各种颜色和透明度的组合效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3中颜色的几种表示法：
        1.英文颜色单词;
        2.rgb(n,n,n);
        3.rgba(n,n,n,m),m为0到1之间的数，表示透明度;
        4.hsl(颜色(色轮值),饱和度，亮度) 又称色轮模式;
透明度问题：
        opacity 设置透明度
        transparent 绝对透明 相当于透明度设置为1

<!DOCTYPE html>
<html>
<head>
    <title>css3新增属性测试</title>
    <meta charset="utff-8">
    <style type="text/css">
        body{background: red}


        /*div{width: 300px;height: 200px; background: rgba(0,255,0,0.5);}*/
        /*div{width: 300px;height: 200px; background: hsl(120,50%,50%);}*/
        div{width: 300px;height: 200px; background:rgb(0,255,0);opacity:0.5;}

    </style>
</head>
<body>
<div>Hello CSS3!!</div>
</body>
</html>

结果演示：

这里写图片描述