編碼的世界 / 優質文選 / 生涯

純css實現背景圖片半透明，內容不透明

2022年7月26日
-

前言
最近做一個登陸界面的，突然想使用這種背景圖片透明，而內容不透明的效果，這裏我就說一說我的兩個思路吧。
效果展示

常見的失敗做法
最常見的做法事設置元素的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>
 	<div 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>	
 	</div>
 </body>
 </html>

還有一種方法與偽元素異曲同工，我們可以通過設置不通的div，裏面的div放置內容，父級div設置背景，然後給它設置透明度，大概布局如下：

<div class="bg">
	<div class="content">
	一些內容
	</div>
</div>

這樣也可以達到同樣的效果

編碼的世界 / 優質文選 / 生涯

純css實現背景圖片半透明，內容不透明

熱門文章