如何在CSS中模糊我的背景图像？

我使用filter: blur(5px);模糊了我在身体元素中的背景图像问题是，而不是背景图像，div中的我的内容是受影响的。如何在CSS中模糊我的背景图像？

<!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>

来源

2017-02-24 studentAir01

请删除PHP和所有这些不必要的东西。 jsFiddle也会很好。 –

您不能将“过滤器”应用于背景图像......仅适用于元素或伪元素。 –

试试这个

<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 { 
     width: auto; 
     margin:0; 
     padding:0; 
     /*background-color: #2E3137; */ 


    } 

    body:before { 
     content: ''; 
     position: fixed; 
     width: 100vw; 
     height: 100vh; 
     background-image: url("https://wallpaperbrowse.com/media/images/background-pictures-2.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; 
    }

现场演示 - https://jsfiddle.net/grinmax_/fmus0fe0/

来源

2017-02-24 09:07:49 grinmax

如何将我的背景图像设置为适合我的屏幕尺寸的全尺寸？看起来像我的（背景大小：封面;）是毫无意义的，因为有宽度和高度设置为宽度：100vw; 身高：100vh; – studentAir01

@ studentAir01在我的例子中，背景被拉伸（封面），让我看看你在jsfidle中有什么 – grinmax

在我的情况下它不是全尺寸。我的背景图像上方有一个白色。我在我的操作中添加了图像。 – studentAir01

body:before { 
 
\t content: ''; 
 
\t position: fixed; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t 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>

来源

2017-02-24 10:03:40

为什么背景图片没有覆盖整个页面？我希望它的大小适合我的屏幕。 – studentAir01

http://jsfiddle.net/jLGFp/3/ – 2017-02-24 10:52:24

如何在CSS中模糊我的背景图像？

回答

相关问题