如何模糊 div 的背景图片,而不模糊其余站点或 div 的内容
How to blur background image of div, without blurring the remaining site or the content of the div
我正在研究如何模糊 div 的背景图像。目标是只模糊 div 的背景图像,而不是页面本身或 div 内容的背景。
这是一个例子div:
<header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
CSS:
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
这是包含我试过的 CSS 的 JS fiddle:
http://jsfiddle.net/80jzdvqp/
非常感谢您的帮助!
这是解决方案
<body><header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
</body>
Css :
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
我使用 div
创建了一个示例,其中包括一个 parent div,image and text
。现在,如果我不对里面的 elements
应用任何 position
,那么它们将 align one after another
,但要使 image
成为 div
的 background
我已将其 position
设置为 absolute
并使用 filter
您可以将 blur
应用于 image
然后使用 z-index align
它们即文本和图像.希望这有帮助。
The filter property provides graphical effects like blurring,
sharpening, or color shifting an element. Filters are commonly used to
adjust the rendering of images, backgrounds, and borders.
div{
width:200px;
height:200px;
overflow:hidden;
position:relative;
}
div > img{
width:auto;
height:100%;
z-index:1;
top:0;
left:0;
position:absolute;
filter:blur(10px);
}
div > p{
text-align:center;
top:60px;
z-index:9;
position:relative;
}
<div>
<p>Demo text.Demo text.Demo text.Demo text.Demo text.</p>
<img src="https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg">
</div>
我正在研究如何模糊 div 的背景图像。目标是只模糊 div 的背景图像,而不是页面本身或 div 内容的背景。
这是一个例子div:
<header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
CSS:
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
这是包含我试过的 CSS 的 JS fiddle: http://jsfiddle.net/80jzdvqp/
非常感谢您的帮助!
这是解决方案
<body><header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
</body>
Css :
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
我使用 div
创建了一个示例,其中包括一个 parent div,image and text
。现在,如果我不对里面的 elements
应用任何 position
,那么它们将 align one after another
,但要使 image
成为 div
的 background
我已将其 position
设置为 absolute
并使用 filter
您可以将 blur
应用于 image
然后使用 z-index align
它们即文本和图像.希望这有帮助。
The filter property provides graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
div{
width:200px;
height:200px;
overflow:hidden;
position:relative;
}
div > img{
width:auto;
height:100%;
z-index:1;
top:0;
left:0;
position:absolute;
filter:blur(10px);
}
div > p{
text-align:center;
top:60px;
z-index:9;
position:relative;
}
<div>
<p>Demo text.Demo text.Demo text.Demo text.Demo text.</p>
<img src="https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg">
</div>