如何使背景图像模糊，而不是内容 - How to make background image blur and not the content?

How to make background image blur and not the content?

本文关键字：何使背景图像模糊 | 更新日期: 2023-09-27

我试图实现图像的模糊属性，但它只是模糊的身体。我不确定如何正确显示它。谢谢!这是网站

http://79.170.44.80/sicuandomain.com/

这里是html，和样式，php代码

<?php
  $bg = array('Abstract.jpg', 'Antelope.jpg', 'Bahamas.jpg', 'Beach.jpg' ); // array of filenames
  $i = rand(0, count($bg)-1); 
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<!DOCTYPE html>
<html>
<head>
    <title>My Contact Form</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
body{
    content:"";
    background: url(images/<?php echo $selectedBg; ?>) no-repeat;
    background-size: cover;
    z-index: -999;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <form id="form" action="welcome.php" class="form-horizontal" method="POST">
                    <h1 class="">My Contact Form</h1>
                    <div class="form-group">
                        <div class="col-lg-4">
                            <input type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*"required/>
                        </div>
                        <div class="col-lg-4">
                            <input type="text" placeholder="Last Name" name="lname" class="form-control" required/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-8">
                            <input type="email" placeholder="Email Address" name="email" class="form-control" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-8">
                            <input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-8">
                            <select name="gender" class="form-control" required>
                                <option value="">Select one</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Others">I'm not sure</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class>
                    </div>
                    <div class="form group">
                        <div class="col-lg-offset-2 col-lg-6">
                            <button type="submit" class="btn btn-success pull-right">
                                <i class="fa fa-plus"></i> Add
                            </button>
                        </div> 
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.11.3.min.js.css" type="text/javascript"></script>
</body>
</html>

试试这个

demo fiddle http://jsfiddle.net/jLGFp/3/

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}