如何设置背景透明度

javaWeb阶段 专栏收录该内容
55 篇文章 0 订阅

设置背景透明度分为两种:一种背景为颜色设置的纯色背景;另一种是图片做背景。

【情况一】纯色背景

关键代码:background:rgba(R,G,B,A)

  • RGB--------三原色(red,green,bule)
  • A-------透明度

关于三原色最终成型的颜色,可以用画图软件进行参考。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例代码一</title>
    <style>
        div { width:200px; height: 200px; }
    </style>
</head>
<body>
<div style="background-color: green"></div>
<hr>
<div style="background-color:rgba(0,255,0,0.5)"></div>
</body>
</html>

示例输出:


【情况二】图片背景

关键代码:filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;

  • filter:alpha(opacity=60); /*支持 IE 浏览器*/
  • -moz-opacity:0.60; /*支持 FireFox 浏览器*/
  • opacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/

示例代码一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例代码二</title>
</head>
<body style="background-image: url('qinghua.jpg');background-repeat: no-repeat">
</body>
</html>

示例输出一:

 示例代码二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例代码二</title>
    <style>
        .book{
            width: 100%;
            filter:alpha(opacity=40);
            -moz-opacity: 0.4;
            opacity: 0.4;
            background: url("qinghua.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="book">
    <h1>我爱学习</h1>
    <h1>学习爱我</h1>
    <h1>沉迷学习</h1>
    <h1>无法自拔</h1>
</div>
</body>
</html>

示例输出二:

注意:当针对图像背景修改透明度时,需结合div一起使用。 在背景图片颜色变淡的同时,背景上的文本字的颜色也会随之变淡。

  • 2
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值