css - 使用 Bootstrap 可扩展性模糊图像的一部分

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;
}

这是我当前横幅的图片，我想将其向日葵涂成蓝色，但要覆盖文本直至白色边框。

enter image description here

谢谢

Answer 1

在这里使用类似 Fiddle 的东西怎么样？(网上找的) http://jsfiddle.net/KodeError404/sE4Fv/723/

即使它不使用 Bootstrap ，但您可以调整并放置您的文本并调整 CSS 以适应 <div> 中的文本。

请记住更改宽度/高度以查看您想要的高度/宽度高度!(现在它的百分比表示比率)