Question

问题在于表单也随着图像而变得模糊。我只需要背景模糊并且表格可见即可。 css中是否有像线性渐变这样的仅可应用于图像的属性。我使用了filter：blur（），它模糊了整个内容。如何解决呢？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
    .payform{
        background: url("https://i.imgur.com/b7r1f.jpg");
        background-size: cover;
        background-repeat: contain;
        filter: blur(4px);
    }
</style>

<div class="container payform">
    <form style="height: 600px;" action="<?php echo $action; ?>" method="post" name="payuForm">

<div class="row ">
<div class="col-md-5 offset-3" style="margin: 0 auto;">
    <h3></h3>

<div class="form-group">

    <label for="selectplan">Choose Your Plan</label> 
    <select class="form-control customize2" id="selectplan" style="border: 1px solid rgba(239, 40, 166, 0.2);">
      <option selected="true" disabled="disabled">Choose One</option>
      <option value="s">Silver</option>
      <option value="g">Gold</option>
      <option value="d">Diamond</option>
      <option value="p">Platinum</option>
    </select>

</div>

<div class="form-group">
          <input type='hidden' id='amount' class="form-control" placeholder="Amount" name="amount" value="<?php echo (empty($posted['amount'])) ? '' : $posted['amount'] ?>" />
</div>
<div class="form-group">
          <label>First Name: </label>
          <input  class="form-control customize2" style="border: 1px solid rgba(239, 40, 166, 0.2);" placeholder="First Name" name="firstname" id="firstname" value="<?php echo (empty($posted['firstname'])) ? '' : $posted['firstname']; ?>" />
</div>

<div class="form-group">
          <lable>Email: </label>
          <input  class="form-control customize2" style="border: 1px solid rgba(239, 40, 166, 0.2);" placeholder="Email" name="email" id="email" value="<?php echo (empty($posted['email'])) ? '' : $posted['email']; ?>" />
</div>
<div class="form-group">
          <lable>Phone:</label>
          <input type="number" class="form-control customize2" style="border: 1px solid rgba(239, 40, 166, 0.2);" placeholder="Phone" name="phone" value="<?php echo (empty($posted['phone'])) ? '' : $posted['phone']; ?>" /></td>
        </div>
<div class="form-group" style="visibility: hidden;" >

          <lable>Product Info:</label>
          <textarea id="pinfo" name="productinfo" class="form-control"><?php echo (empty($posted['productinfo'])) ? '' : $posted['productinfo'] ?></textarea>
   </div>

            <td colspan="4"><input style="position:relative;top:-100px;" type="submit" class="btn btn-custom btn-pay" value="Pay Now" /></td>

</div>
</div>

内容也随着图像而变得模糊

0 个答案: