css实现背景图片半透明内容不透明代码分享-css教程-PHP中文网

首页

web前端

css教程

css实现背景图片半透明内容不透明代码分享

小云云

Mar 14, 2018 am 09:43 AM

背景图片

本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。

最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。

效果展示

半透明

不透明

常见的失败做法

最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。

还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。

正确姿势

我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现

<!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>

登录后复制

还有一种方法与伪元素异曲同工，我们可以通过设置不通的p，里面的p放置内容，父级p设置背景，然后给它设置透明度，大概布局如下：

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

登录后复制

这样也可以达到同样的效果。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7469

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Win11如何自定义背景图片 Jun 30, 2023 pm 08:45 PM

Win11如何自定义背景图片？在最新发布的win11系统中，里面有许多的自定义功能，但是很多小伙伴不知道应该如何使用这些功能。就有小伙伴觉得背景图片比较单调，想要自定义背景图，但是不知道如何操作自定义背景图，如果你不知道如何定义背景图片，小编下面整理了Win11自定义背景图片步骤，感兴趣的话一起往下看看把！Win11自定义背景图片步骤1、点击桌面win按钮，在弹出的菜单中点击设置,如图所示。2、进入设置菜单，点击个性化,如图所示。3、进入个性化，点击背景,如图所示。4、进入背景设置，点击浏览图片

如何在win10个性化设置中删除背景图片 Dec 21, 2023 pm 02:31 PM

Win10系统每次使用过的桌面背景都会在设置中的个性化背景图片里面显示，有些用户想删除，但是不知道怎么操作，这篇文章是本站给大家分享的Win10个性化背景图片删除方法。查看使用过的桌面背景图片：1、桌面空白处点击【右键】，在打开的菜单项中，选择【个性化】；2、在背景中的选择图片中，可以查看到您使用过的桌面背景图片；删除使用过的桌面背景图片：注意：本操作涉及到修改注册表，修改注册表有风险，请提前备份数据1、同时按下【Win+R】组合键，打开运行窗口，输入【regedit】命令，然后点击【确定】；2

抖音直播伴侣怎样添加背景图片-抖音直播伴侣添加背景图片的方法 Mar 05, 2024 am 09:16 AM

很多在抖音做直播的用户都会使用抖音直播伴侣软件，不过你们知道抖音直播伴侣怎样添加背景图片吗?下文就是小编为你们带来的抖音直播伴侣添加背景图片的方法，感兴趣的用户快来下文看看吧。首先登录电脑上的抖音直播伴侣，然后进入主页。在左边，我们选择[添加材料]在[场景1]下面。接着，页面上会有一个添加材料的窗口，我们可以直接选择[图片]功能点击进入。然后，我们会打开一个当地存放图片材料的窗口。我们需要选择我们想要添加的图片材料，然后点击右下角的打开按钮添加它们。添加图片后，我们需要用鼠标左键将图片拉到合适的

ppt背景图片怎么统一替换 Mar 25, 2024 pm 04:16 PM

PPT 背景图片的统一替换是提升演示文稿视觉风格的重要操作，可通过两种主要方法实现：幻灯片母版替换和批量替换。幻灯片母版替换涉及在母版中删除原有图片并插入新图片，从而应用于所有幻灯片。批量替换功能则直接替换演示文稿中所有幻灯片的背景图片。统一背景图片不仅美化演示文稿，还增强观众专注力。选择与主题相符且质量高的图片至关重要，并应注意调整透明度、大小等细节。此外，PPT 还提供丰富的背景设置选项，如渐变、纹理和图案，可根据需求自定义调整。

WPS Office 2016中背景图片的设置方法介绍 Mar 29, 2024 pm 10:21 PM

1、启动WPS演示，如图。2、点击【+】按钮，新建幻灯片，如图。3、点击右键，选择【背景】，如图。4、在【对象属性】页的填充选项中，选择【图片或纹理填充】，如图。5、在图片来源中，点击】本地文件【，如图。6、在对话框中，选择想要插入的图片，并点击】打开【按钮，如图的例子。7、这样就完成WPS演示的背景图片设置了。如图的效果。

ppt背景图片怎么设置 Mar 25, 2024 pm 04:12 PM

设置PPT背景图片可以为演示文稿增添视觉效果和吸引力。本教程详细介绍了如何选择合适的图片、设置背景图片以及调整其与演示内容的协调性。通过遵循本指南，你可以轻松地为PPT创建出令人印象深刻的背景图片，提升演示文稿的整体效果。

唧唧Down如何更换背景图片？唧唧Down更换背景图片的方法 Mar 04, 2024 pm 03:30 PM

想必在座的用户对唧唧Down软件都不陌生，但是你们知道唧唧Down如何更换背景图片吗?本章节为你们带来的文章就是唧唧Down更换背景图片的方法，感兴趣的伙伴们快一同来下文看看吧。点击电脑桌面上的“唧唧Down”图标，打开软件。进入唧唧Down主界面，点击设置。在设置中，将进度条拉到最下方。(如下图)在高级功能下方，点击自定义背景图。在电脑文件中找到喜欢的背景图，点击打开即可。

ppt背景图片怎么设置全部应用 Jan 07, 2021 pm 04:58 PM

设置方法：1、打开制作好的需要编辑的PPT文件；2、点击“对象属性”按钮，打开“对象属性”菜单，将“填充”设置为“图片或纹理填充”，之后点击“请选择图片”，选择“本地上传”；3、选择背景图片，点击“打开”按钮；4、点击“全部应用”按钮即可。

See all articles

css实现背景图片半透明内容不透明代码分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题