background-image定义的图片的透明度修改

最新推荐文章于 2024-06-11 08:59:24 发布

不如睡觉去

最新推荐文章于 2024-06-11 08:59:24 发布

阅读量1.7w

点赞数 11

分类专栏：前端文章标签：前端背景图透明度 background-image

本文链接：https://blog.csdn.net/cxb_96/article/details/99718456

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文章采用的是在背景图上面加一个半透明的白色的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        body {
            height: 100%;
            background-image: url(img/123.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        #container {
            background-color: rgba(255, 255, 255, 0.8);
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container">
        background-image透明，背景图片透明，这些字并不会透明
    </div>
</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不如睡觉去

关注关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
2
评论
background-image定义的图片的透明度修改

本文章采用的是在背景图上面加一个半透明的白色的方法<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
复制链接

扫一扫