HTML如何给背景颜色设置透明度

 我来答
大沈他次苹0B
2018-01-23 · TA获得超过7323个赞
知道大有可为答主
回答量:3059
采纳率:100%
帮助的人:177万
展开全部

(1)创建一个html文件。如图

(2)在html文件找到一个<body>标签,在这个标签里创建一个<div>标签并添加一个类,在这把这个类设置为:rgba。 如图

(3)为div添加样式。在<title>标签后面创建一个<style>,在<style>标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,透明度参数越小透明度越高。如图

(4)保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。如图:

(5)所有代码。可以把所有代码复制到新建的html文件上,保存好后使用浏览器打开借口看到效果。如图

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2022-06-28
展开全部

html给背景图片设置透明度的方法有2种

1、使用opacity属性,给设置背景图片的元素添加“opacity:透明度值;”样式即可;

属性值从 0.0 到 1.0。值越小,越透明

    示例:

<!DOCTYPE html>

<html>

    <head>

        <style type="text/css">

            div {

                width: 300px;

                height: 300px;

                background-image: url(img/3.jpg);

            }

            .box{

                opacity: 0.5;

            }

        </style>

    </head>

    <body>

        <div>背景图片</div>

        <div class="box">背景图片</div>

    </body>

</html>

2、使用filter属性,给设置背景图片的元素添加“filter: opacity(透明度值);”样式即可

filter属性定义了元素(通常是)的可视效果(例如:模糊与饱和度);

2.1 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

属性值代表的意义:

grayscale灰度

sepia褐色(有种复古的旧照片感觉)

saturate饱和度

hue-rotate色相旋转

invert反色

opacity透明度

brightness亮度

contrast对比度

blur模糊

drop-shadow阴影

示例:

<!DOCTYPE html>

<html>

    <head>

        <style type="text/css">

            div {

                width: 300px;

                height: 300px;

                background-image: url(img/3.jpg);

            }

            .box{

                filter: opacity(0.6);

            }

        </style>

    </head>

    <body>

        <div>背景图片</div>

        <div class="box">背景图片</div>

    </body>

</html>

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式