background-image透明,背景图片透明

关于实现background-image透明,背景图片透明的方法,我查阅了很多资料,然后还是没有解决,这样我们不如换个思路想想,在背景图片上面再加一层半透明的白色不就能够实现背景图片的透明了吗?代码如下:


<!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(http://upload-images.jianshu.io/upload_images/117091-530891d81ae62dea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);
            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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容