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

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>

上面的代码 sn-p 会在 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 从左边算起（这是从左边测量的 RIGHT 边界）
3. 80vh 从顶部（这是从顶部测量的底部边框）
4. 10vw 从左边算起（这是从左边测量的 LEFT 边界）

下图将帮助您更详细地解释计算：

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

您的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 3

（你没有在 cmets 中回答我的问题，所以在反馈显示之前，我仍然选择一般的答案；））

如果要使图像变暗，您可以使用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>

Answer 4

您尝试做的事情通常很难用 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;
}

小提琴

http://jsfiddle.net/sE4Fv/

带有灰度滤镜的FIDDLE

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