我想要带有覆盖文字的模糊背景图像
[英]I want a blurred background image with overlay text
问题描述
So, I am taking the jumbotron out of the container because I want it to be full width. 
因此，我要从容器中取出巨型飞弹，因为我希望它是全宽的。 But when I apply text to the jumbotron it blurs it out as well. 但是，当我将文本应用于超大屏幕时，它也会使文本模糊。 I tried doing the opposite and throwing my background image in a separate <div> but couldn't manage to make it take up the full space like I had it before. 我尝试做相反的事情，然后将背景图像丢在单独的<div>但无法像以前一样设法使其占据整个空间。 Thoughts? 有什么想法吗？
My codepen project... 我的Codepen专案...
html, body { height: 100%; width: 100%; } .navbar-nav > li { padding: 0px 25px 0px 40px; margin: -15px 0px 0px 0px; top: -25px; right: 30px; } .jumbotron { width: 100%; } .jumbotron { background:url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg"); height: 100vh; background-size: cover; background-repeat: no-repeat; -webkit-filter: blur(5px); filter: blur(5.5px); width: 100%; } p { color: white; }
<body> <!-- NAVIGATION BAR --> <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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 text-center">Michael Adamski <br><span class="sub-brand">- Web Developer -</span></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navbar-list"> <ul class="nav navbar-nav navbar-right"> <li a href="home" class="active">Home</li> <li a href="#about">About</li> <li a href="portfolio">Portfolio</li> <li a href="Contact">Contact</li> </ul> </div> </div> </nav> <!-- End Navigation Bar --> <!-- Header --> <div class="jumbotron"> <div class="container"> <h1> This is my Page! </h1> <p> This is an example of what I can do with my newfound knowledge</p> </body>
2 个解决方案
解决方案1
3 已采纳 2016-10-14 23:17:23
You can do this with a simple pseudo class - working fiddle 您可以使用一个简单的伪类来做到这一点- 工作小提琴
The idea is to put the background into it's own pseudo element so the blur wont effect the children of the .jumbotron div. 想法是将背景放入其自己的伪元素中，以便模糊不会影响.jumbotron div的子级。 Pay particular attention to the z-index and position settings, as they place the background behind the content. 请特别注意z索引和位置设置，因为它们会将背景放在内容后面。
.jumbotron {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.jumbotron .container {
position: relative;
z-index: 2;
color: #ffffff;
}
.jumbotron:after {
content:"";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url("http://example.com/linktoimage.jpg");
background-size: cover;
background-repeat: no-repeat;
filter: blur(5.5px);
transform: scale(1.1);
}
Also notice the transform: scale(1.1); 还要注意transform: scale(1.1); , this will make the background slightly larger than the container so you don't get the 'white' fade out towards the edges. ，这会使背景比容器稍大，因此不会使“白色”淡出边缘。 The wrapper .jumbotron then has overflow: hidden; 包装器.jumbotron然后overflow: hidden; to hide the image overflow. 隐藏图像溢出。
解决方案2
0
A possible solution is to replace the jumbotron by a div inside of which you place your heading, paragraph, and an image: 一个可能的解决方案是用一个div替换巨无霸，在其中放置标题，段落和图像：
#bg { position: absolute; height: 100vh; background-size: cover; background-repeat: no-repeat; -webkit-filter: blur(5px); filter: blur(5.5px); max-width: 100%; } #header { position: absolute; top: 15%; width: 100%; } #header h1 { margin-top: 20%; } #header p { color: #fff; margin-top: 25%; } #header p, #header h1 { position: absolute; left: 50%; transform: translateX(-50%); color: #fff; z-index: 100; }
<div id="header"> <h1> This is my Page! </h1> <p> This is an example of what I can do with my newfound knowledge</p> <img id="bg" src="http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg"> </div>
You may need to adjust the padding and margin for the navigation. 您可能需要调整导航的填充和边距。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.