Bootstrap Jumbotron模糊背景图像，没有模糊文本

时间：2016-05-19 12:58:10

标签： css twitter-bootstrap

我试图这样做，所以我的Jumbotron图像模糊不会影响图像中包含的文字！这是我的index.html文件和style.css非常感谢你的帮助！

＆＃13;
＆＃13; 
body {
  background-image: url(bg1.png);
  background-repeat: repeat-x repeat-y;
}
.navbar-brand,
.navbar-nav li a {
    line-height: 77px;
    height: 77px;
    padding-top: 0;
}
.lgpad {
  padding-top: 10px;
  padding-right: 5px;
}
.jumbotron {
    margin-bottom: 0px;
    background-image: url(https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/12717582_1731718593707877_5091666265045953541_n.jpg?oh=0d07c7f60f9490bc8f8621f139570cb3&oe=57A01DA0);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    color: #DEDDDB;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px);
  }
.bpad {
  padding-top: 100px;
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

    <title>#</title>
  </head>
  <body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img class="lgpad" alt="Brand" src="infenso.gif">
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
      <div class="bpad">
      </div>
      <div class="container">
      <div class="jumbotron">
        <h1>#</h1>
        <p>#</p>
      </div>
      </div>
  </div>
  </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

谢谢

1 个答案:

答案 0 :(得分：2)

只需将您正在模糊的图像放在一个单独的div中：

body {
  background-image: url(https://i.stack.imgur.com/dql72.jpg);
  background-repeat: repeat-x repeat-y;
}
.navbar-brand,
.navbar-nav li a {
    line-height: 77px;
    height: 77px;
    padding-top: 0;
}
.lgpad {
  padding-top: 10px;
  padding-right: 5px;
}

body .jumbotron {
    margin-bottom: 0px;
    position: relative;
    background: none;
    color: #DEDDDB;
  }
.bpad {
  padding-top: 100px;
}

.jumbotron .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://i.stack.imgur.com/1k5j4.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px);
     z-index: -1;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

    <title>#</title>
  </head>
  <body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img class="lgpad" alt="Brand" src="https://i.stack.imgur.com/yfVE6.png">
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
      <div class="bpad">
      </div>
      <div class="container">
      <div class="jumbotron">
        <div class="bg"></div>
        <h1>#</h1>
        <p>#</p>
      </div>
      </div>
  </div>
  </body>
  </html>

相关问题
最新问题