如何在CSS中模糊背景图像? [英] How can I blur my background image in css?
本文介绍了如何在CSS中模糊背景图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 filter:blur(5px); 在body元素中模糊背景图像，问题是不是背景图像，而是div中的内容受到了影响.
I blur my background image in body element using filter: blur(5px); The problem is instead of the background image, my content inside the div is the one that is affected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
width: auto;
margin:0;
padding:0;
/*background-color: #2E3137; */
background-image: url("images/StockSnap_Q6PIRY9O7M.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
@font-face {
font-family: 'Roboto', sans-serif; /*a name to be used later*/
src: url('https://fonts.googleapis.com/css?family=Roboto'); /*URL to font*/
}
* {
border-collapse: collapse;
}
h2 {
text-align: center;
}
.container {
width: 960px;
height: 500px;
margin: 50px auto;
position: relative;
}
.row {
width: 320px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: arial;
/*font-size: 13px;*/
/*color: #e4e4e4; */
color: white;
padding: 10px 55px 40px;
/*background: rgba(105,97,82,0.5);*/
/*background: rgba(20,21,23,0.6); */
background: rgb(102, 105, 110);
border: 1px solid white;
box-shadow: 0 4px 8px #000000;
border-radius: 5px;
font-family: 'Roboto';
}
input[type=text],[type=password] {
width: 97%;
height: 30px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
color: #4f4f4f;
font-size: 16px;
}
#login {
width: 100%;
margin-top: 5px;
padding: 5px;
font-weight: bold;
cursor: pointer;
/* display: block; use for centering */
display: block;
/*background-color: #DEE9FF;*/
}
#signup {
width: 100%;
margin-top: 5px;
padding: 5px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<?php
include_once("code1.php");
?>
<div class="container">
<div class="row">
<h2> Sign In </h1>
<form action="p1.php" method="POST">
<?php echo form_errors($errors); ?>
Username: <br/>
<input type="text" name="username" /> <br/>
Password:
<input type="password" name="password" /> <br/>
<input type="submit" name="submit" id="login"/>
</form>
<form action="register.php" method="POST">
<input type="submit" name="register" value="Create New Account" id="signup"/>
</form>
</div>
</div>
</body>
</html>
推荐答案
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
background-image: url("http://www.planwallpaper.com/static/images/hexagons-3d-desktop-wallpaper-hd_VUiBHpV.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index: -9;
}<body>
<h1 style="margin: 20px auto; width: 80%; color: #393; background: rgba(0,0,0,0.7); text-align: center">Hello from Breakermind</h1>
</body>这篇关于如何在CSS中模糊背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
