首页 > 软件开发 > CSS >

css设置背景透明度

来源:互联网 2023-03-16 19:17:38 版权归原作者所有,如有侵权,请联系我们

css设置背景颜色透明度只需要使用rgba(R,G,B,A)即可。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。A为透明度参数,取值在0~1之间,不可为负值。gi8办公区 - 实用经验教程分享!

语法:background-color:rgba(0,0,0,0.1);gi8办公区 - 实用经验教程分享!

css设置背景透明度gi8办公区 - 实用经验教程分享!

方法/步骤

  • 1

    创建一个html文件。如图gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

  • 2

    在html文件找到一个body>标签,在这个标签里创建一个div>标签并添加一个类,在这把这个类设置为:rgba。 如图gi8办公区 - 实用经验教程分享!

    代码:div class="rgba">/div>gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

  • 3

    为div添加样式。在title>标签后面创建一个style>,在style>标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,透明度参数越小透明度越高。如图gi8办公区 - 实用经验教程分享!

    代码:gi8办公区 - 实用经验教程分享!

    style type="text/css">gi8办公区 - 实用经验教程分享!

    .rgba{gi8办公区 - 实用经验教程分享!

    background-color: rgba(0,0,0,0.5);gi8办公区 - 实用经验教程分享!

    height: 200px;gi8办公区 - 实用经验教程分享!

    }gi8办公区 - 实用经验教程分享!

    /style>gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

  • 3
  • 4

    保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。如图:gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

  • 5

    所有代码。可以把所有代码复制到新建的html文件上,保存好后使用浏览器打开借口看到效果。如图gi8办公区 - 实用经验教程分享!

    所有代码:gi8办公区 - 实用经验教程分享!

    !DOCTYPE html>gi8办公区 - 实用经验教程分享!

    html>gi8办公区 - 实用经验教程分享!

    head>gi8办公区 - 实用经验教程分享!

    meta charset="UTF-8">gi8办公区 - 实用经验教程分享!

    title>css设置背景透明/title>gi8办公区 - 实用经验教程分享!

    style type="text/css">gi8办公区 - 实用经验教程分享!

    .rgba{gi8办公区 - 实用经验教程分享!

    background-color: rgba(0,0,0,0.5);gi8办公区 - 实用经验教程分享!

    height: 200px;gi8办公区 - 实用经验教程分享!

    }gi8办公区 - 实用经验教程分享!

    /style>gi8办公区 - 实用经验教程分享!

    /head>gi8办公区 - 实用经验教程分享!

    body>gi8办公区 - 实用经验教程分享!

    div class="rgba">/div>gi8办公区 - 实用经验教程分享!

    /body>gi8办公区 - 实用经验教程分享!

    /html>gi8办公区 - 实用经验教程分享!

    css设置背景透明度gi8办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!gi8办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号