美文网首页
background-image透明,背景图片透明

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

作者: 失控疯男 | 来源:发表于2017-07-12 16:35 被阅读0次

关于实现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(https://img.haomeiwen.com/i117091/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>

相关文章

网友评论

      本文标题:background-image透明,背景图片透明

      本文链接:https://www.haomeiwen.com/subject/wnvbhxtx.html