Home > Article > Web Front-end > CSS realizes background image translucency and content opaque code sharing

CSS realizes background image translucency and content opaque code sharing

小云云Original: 2018-03-14 09:43:125081browse

This article mainly introduces you to the pure CSS method of making the background image translucent and opaque. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help you.

I recently made a login interface, and suddenly wanted to use this effect of transparent background image and opaque content. Here I will talk about my two ideas.

Effect display

Translucent

Opaque

##Common failed practices

The most common approach is to set the opacity of the element. The effect of this setting is that both the content and the background are translucent, seriously affecting the visual effect.

Another option is to set background-color:rgba(). This method can only set the transparency of the background color.

Correct posture

I think of two methods, the first is to use pseudo-element::before, we add a background to the pseudo-element and set the pseudo-element The background transparency of the pseudo element is used to achieve

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <style type="text/css">
        body{
            background-image:url(images/bird.jpg);
            background-repeat: no-repeat;
            background-size:100%;
        }
        .login_box::before{
            content:"";
            /*-webkit-filter: opacity(50%);  
            filter: opacity(50%); */
            background-image:url(images/love.jpg);
            opacity:0.5;//透明度设置
            z-index:-1;
            background-size:500px 300px;
            width:500px; 
            height:300px;
            position:absolute;
            //一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层
            top:0px;
            left:0px;
            border-radius:40px;
        }
        .login_box{
            position:fixed;
            left:50%;
            top:200px;
            width:500px;
            height:300px;
            margin-left:-250px;
            border-radius:40px;
            box-shadow: 10px 10px 5px #888;
            border:1px solid #666;

            text-align:center;
        }
        form{
            display:inline-block;
            margin-top:100px;
        }
        input{
            display:block;
            width:250px;
            height:30px;
            background-color: #888;
            border:1px solid #fee;
            outline:none;
            border-radius:10px;
        }
        input[type="submit"]{
            width:100px;
            height:30x;
            margin-left: 70px;
            background-color: #ccc;
        }
        span{
            color:red;
            font-size:15px;
        }
    </style>
 </head>
 <body>
    <p class="login_box">
        <form action=<?php echo $_SERVER[&#39;PHP_SELF&#39;] ?> method="post">
            <input type="text" name="nickname">
            <span><?php echo $nameERR; ?></span>
            <br>
            <input type="password" name="password">
            <span><?php echo $passwordERR; ?></span>
            <br>
            <input type="submit" value="登陆">
        </form> 
    </p>
 </body>
 </html>

There is another method that is similar to the pseudo element. We can set an unreasonable p, place the content inside the p, and set the parent p Background, and then set transparency to it. The approximate layout is as follows:

<p class="bg">
    <p class="content">
    一些内容
    </p>
</p>

This can also achieve the same effect.

Related recommendations:

Use Js or Css filters to achieve the translucent effect of PNG images in IE6 IE6PNG properly_html/css_WEB-ITnose

js Method to realize the translucent gradient effect of Jiugongge pictures_javascript skills

CSS opacity - Code to realize the translucent effect of pictures_Experience exchange

The above is the detailed content of CSS realizes background image translucency and content opaque code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS code to implement width-to-height proportional layoutNext article：CSS code to implement width-to-height proportional layout

See more

CSS realizes background image translucency and content opaque code sharing

Related articles