CSS中的透明度设置

CSS3中透明度设置

1.两种设置方式

  • 语法
background-color:rgba(r,g,b,a);

r:红
g:绿
b:蓝
a:透明度
background-color:rgb(r,g,b)
opcity:0.5;
  • 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中透明度设置title>
    <style>
        /*不设置透明度*/
        .box1{
      
            background-color:rgb(217, 107, 116);
            font-size: 36px;
        }
        /*透明度为0.5*/
        .box2{
      
            background-color:rgba(217, 107, 116,0.5);
            font-size: 36px;
        }
        /*透明度为0.5*/
        .box3{
      
            background-color:rgb(217, 107, 116);
            font-size: 36px;
            opacity: 0.5;
        }
    style>
head>
<body>
<div class="box1"> 曾经的照片还留在那个房间div>
<div class="box2"> 曾经的照片还留在那个房间div>
<div class="box3"> 曾经的照片还留在那个房间div>

body>
html>

CSS中的透明度设置_第1张图片

2. 两者区别

opticy设置的透明度会把其所有内容和元素都设置为透明的,rgba设置的透明度只会把设置为该属性所对应的操作设置为透明的。

你可能感兴趣的:(前端开发,CSS3)