css实现背景图片半透明内容不透明代码分享
程序员文章站
2022-03-18 08:46:07
...
本文主要和大家介绍了纯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['PHP_SELF'] ?> 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>
这样也可以达到同样的效果。
相关推荐：
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
js实现九宫格图片半透明渐显特效的方法_javascript技巧
CSS opacity - 实现图片半透明效果的代码_经验交流
以上就是css实现背景图片半透明内容不透明代码分享的详细内容，更多请关注其它相关文章！
上一篇： js css文件怎么引入
下一篇： Django模板语言的详细介绍（附代码）