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

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

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

中的文本

请记住更改宽度/高度以查看所需的高度/宽度高度！（现在以％表示比例）

使用引导程序可伸缩性模糊图像的一部分

1 个答案: