黑白过滤到一个子容器

Question

的特定部分加在上面，其中灰色容器被设置我要添加一个高对比度黑白照片过滤器的照片。

Iv尝试缩放不透明度并使用过滤器css3属性，但没有成功。 正文是背景图片，子容器是灰色框。我想让孩子表现出黑色和白色。

body{ 
    background: url('../images/wtc.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.profile-box{ 
    background-color: grey; 
    width: 80%; 
    height: 60%; 
    margin-top: 180px; 
    margin-bottom: 100px; 
} 

Answer 1

最简单的解决办法，但至少支持：backdrop-filter

最直接的方式，就是实际使用，而新backdrop-filter财产。不幸的是，到目前为止，它是only supported in Safari（和Chrome Canary）。

body{ 
 
    background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.profile-box{ 
 
    width: 80%; 
 
    height: 60%; 
 
    
 
    /* Backdrop filter */ 
 
    -webkit-backdrop-filter: grayscale(100%); 
 
    backdrop-filter: grayscale(100%); 
 
    
 
    /* Additional styles for positioning */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="profile-box"></div>

上面的代码段会呈现在Safari上与此类似：

复杂的解决方案，但更多的跨浏览器兼容

使用已弃用clip：

另一种可以在浏览器中看到更多支持的解决方案是使用clip: rect(...)属性。但是，该属性为deprecated in favour of clip-path（有关更新的解决方案，请参阅下一节）。既然你已经在你的代码中指定了你想要一个宽度为80％，高度为60％（相对于视口，所以相当于80vw和60vh）的灰度区域，我们可以调整传递给clip: rect(...)的参数，如下所示：

clip: rect(30vh, 90vw, 70vh, 10vw); 

坐标表示与剪切矩形的顶部，右侧，底部，左侧边缘的页面的顶部/左侧角偏移。要水平居中放置80vw，我们需要左侧和右侧的10vw（合计为20vw）。要将60vh垂直居中，我们需要顶部和底部的20vh（合计为40vh）。此计算出：

1. 20vh从顶部（这是从顶部测量的顶部边界）
2. 90vw从左侧（这是从左侧测量的右边界）
3. 从顶部80vh（此是从顶部测量的底部边框）
4. 10vw从左侧（这是从左侧测量左边界）

下面将图像帮你解释计算的更多：

body{ 
 
    background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed; 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.profile-box { 
 
    background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed; 
 
    background-size: cover; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    filter: grayscale(100%); 
 
    clip: rect(20vh, 90vw, 80vh, 10vw); 
 
}

<div class="profile-box"></div>

使用新的属性，clip-path：

即使它是一个更现代的标准相比clip，它仍然患有non-support in IE or Edge。 clip-path: inset(...)的参数不是用逗号分隔的，与clip: rect(...)不同，它的使用稍微直观一点，因为每个边都是相对于浏览器的相应边进行测量的。在这种情况下，使用上面我们已经建立了相同的计算逻辑，参数将是：

1. 20vh从顶部
2. 10vw从右侧
3. 20vh从底部
4. 10vw从左侧

换句话说，这样的事情：

clip-path: inset(20vh 10vw 20vh 10vw); 

body{ 
 
    background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed; 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.profile-box { 
 
    background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed; 
 
    background-size: cover; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    filter: grayscale(100%); 
 
    clip-path: inset(20vh 10vw 20vh 10vw); 
 
}

<div class="profile-box"></div>

Answer 2

你想要做什么通常是一个很难用css实现的事情，但它是可能的。我想这个答案将帮助您：

取自https://stackoverflow.com/a/19382357/8312881

通过edensource

书面如果它是动态的，你应该有一些麻烦，但你可以 有地方从此开始：

HTML

<div class="background"></div> 
<div class="mask"> 
    <div class="bluredBackground"></div> 
</div> 
<div class="content"></div> 

CSS

.content { 
    width: 70%; 
    height: 70%; 
    border:2px solid; 
    border-radius:20px; 
    position: fixed; 
    top: 15%; 
    left: 15%; 
    z-index:10; 
    background-color: rgba(168, 235, 255, 0.2); 
} 
.background { 
    width:100%; 
    height:100%; 
    background-image:url('http://www.travel.com.hk/region/time_95.jpg'); 
    z-index:2; 
    position:fixed; 
} 
.bluredBackground { 
    width:100%; 
    height:100%; 
    display:block; 
    background-image:url('http://www.travel.com.hk/region/time_95.jpg'); 
    z-index:1; 
    position:absolute; 
    top:-20%; 
    left:-20%; 
    padding-left:20%; 
    padding-top:20%; 
    -webkit-filter: blur(2px); 
} 
.mask { 
    width: 70%; 
    height: 70%; 
    border:2px solid; 
    border-radius:20px; 
    position: fixed; 
    top: 15%; 
    left: 15%; 
    z-index:10; 
    overflow:hidden; 
} 

FIDDLE

http://jsfiddle.net/sE4Fv/

拨弄灰阶过滤

http://jsfiddle.net/sE4Fv/926/

Answer 3

你body是确定的，只是.profile-box需要一些修正：

div.profile-box { 
    background: url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg') no-repeat center center fixed; 
    background-size: cover; 
    filter: grayscale(100%); 
    // width & height etc... 
} 

附上您在框的背景，以及添加filter: grayscale(100%)

Demo

Answer 4

（你没到我的评论中回答这个问题，所以我还是平均的答案，直到反馈表明去;））

如果事情是加深你的形象，你可以使用rgba()颜色。

一个简单的例子与背景或图象显示的想法，示出了使用grayscale(X%)过滤器的第三示例，如果物质被转无刷交流&白色图像：

.filter { 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.filter:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 15%; 
 
    right: 5%; 
 
    bottom: 15%; 
 
    left: 5%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.filter img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.filter.bg { 
 
    box-sizing: border-box; 
 
    padding: 1.5% 2.5%; 
 
    background: url(http://lorempixel.com/1200/250/city/5) center/100% auto; 
 
} 
 

 
.bg:before { 
 
    display: none; 
 
} 
 

 
.content { 
 
    min-height: 7.45vw; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5) 
 
} 
 

 
.grayscale .content { 
 
    background: url(http://lorempixel.com/1200/250/city/5) center/50vw auto; 
 
    filter: grayscale(100%); 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="filter"> 
 
    <img src="http://lorempixel.com/1200/250/city/5" alt="my nice City" /></div> 
 

 
<div class="filter bg "> 
 
    <div class="content">Some content hover the bg </div> 
 
</div> 
 
<div class="filter bg grayscale "> 
 
    <div class="content">Some content hover the bg </div> 
 
</div>