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

2017-07-12  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读