将黑白过滤器添加到子容器的特定部分

Question

在上面设置灰色容器的照片中，我想添加一个高对比度的黑白照片滤镜。

我尝试缩放不透明度并使用过滤器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（这是从顶部测量的TOP边界）
左边的
2. 90vw（这是从左边测量的右边界）
从顶部
3. 80vh（这是从顶部测量的BOTTOM边界）
左边的
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/

     

带灰度过滤器的FIDDLE

     

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%)过滤器的使用，如果事情是转向blac＆amp;白色图像：

.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>