使用引导可扩展性模糊图像的一部分

Question

我试图模糊文本后面的图像的一部分，而不是文本，也不是盒子外的任何内容（下面的代码）。如果可能的话，我也希望得到快速解释，因为我也在努力理解它。我胡闹了，亲近了。

.HTML：

 <div class="banner">
     <div class="container-fluid text-center">
       <h1>Tex Text Text</h1>
     </div>
 </div>

.CSS：

.banner { 
   height:200px;
   background-size:cover; 
   background-position:center center; 
   background-repeat:no-repeat; 
   background-image:url('sun.jpg');
}

.banner h1 {
   color:white;
   border: 3px solid white;
   padding: 20px;
   margin: 50px;
}

这是我当前横幅的图像，我想将向日葵变成蓝色，但在文本上方直到白色边框。

在此处输入图像描述

谢谢

Answer 1

在这里使用像这样的东西怎么样？（在网上找到）http://jsfiddle.net/KodeError404/sE4Fv/723/

即使它不使用引导程序，但您可以调整和放置文本并调整 CSS 以适应您的文本<div>

请记住更改宽度/高度

以查看所需的高度/宽度！（现在它的 % 含义是比率）