程序员经验分享-hwhale

CSS 仅在 Div 中的其他图像保持饱和的情况下降低背景图像的饱和度

2024-03-19

我试图降低 div 背景图像的饱和度，同时使同一 div 内的图像保持饱和。我找到了一个与我想要做的事情接近的例子（除了模糊），但尝试了它的多种变体但没有成功。

在下面的代码中，.desaturate 类正确应用滤镜属性并将背景图像转换为黑白图像。本节标记中的其他图像按照预期继承了去饱和，但是当我尝试通过 img.saturate 类“重新饱和”时，它没有被应用。我已经将我的代码缩减到尽可能短/基本的程度，以解释我想要做什么。任何如何做到这一点的想法或解决方案都值得赞赏。

<html>
  <style>
    .desaturate {
      width: 100%;
      height: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
       /*grayscale for background image*/
      -webkit-filter: grayscale(1); 
      -webkit-filter: grayscale(100%); 
      -moz-filter: grayscale(100%);
      filter: gray; 
      filter: grayscale(100%);
      filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    }

  img.saturate {
    filter: none !important;
    width: 300px;
    height: 200px;
    -webkit-filter: grayscale(0%) !important;
    -moz-filter:    grayscale(0%) !important;
    -ms-filter:     grayscale(0%) !important;
    -o-filter:      grayscale(0%) !important;
  }
  </style>
  <body>
    <section class="desaturate" style="background-image: url('bg-img-1.jpg');">
      <div class="row">
        <div class="col-md-12">
          <img src="img-2.jpg" class="img-responsive saturate" alt="" />      
        </div>
      </div>
    </section>
  </body> 
</html>

饱和度的工作方式与不透明度相同，您不能将效果应用于父项，然后在子项中撤消它。您最好的选择可能是使灰度图像成为您部分的子图像，但不是图像的父图像：

<section>
  <figure class="desaturate" style="background-image: url('bg-img-1.jpg');"></figure>
  <div class="row">
    <div class="col-md-12">
      <img src="img-2.jpg" class="img-responsive saturate" alt="" />      
    </div>
  </div>
</section>

您的另一个选择是继承背景::before or ::after伪元素并在那里应用过滤器：

.desaturate {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.desaturate:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
   /*grayscale for background image*/
  -webkit-filter: grayscale(1); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%);
  filter: gray; 
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

您可以在这里查看演示：http://codepen.io/Godwin/pen/ogLPvR http://codepen.io/Godwin/pen/ogLPvR.

Edit： 只是为了感兴趣，还有另一种方法可以做到这一点，但它还没有很高的浏览器支持：

.desaturate {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*grayscale for background image*/
    background-color: #FFF;
    background-blend-mode: luminosity, normal;
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

例子：http://codepen.io/Godwin/pen/raLZVr http://codepen.io/Godwin/pen/raLZVr

支持：http://caniuse.com/#feat=css-backgroundblendmode http://caniuse.com/#feat=css-backgroundblendmode

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

CSS 仅在 Div 中的其他图像保持饱和的情况下降低背景图像的饱和度 的相关文章

随机推荐

  • Java泛型通配符及其局限性

    我有一个由两部分组成的问题 我的书指出 如果指定通配符时没有大写字母 绑定 那么只能调用 Object 类型的方法 通配符类型的值 我不知道这意味着什么 这是什么意思 另外 通配符类型 无界和有界 有哪些限制 例如 如果我有一个参考MyCl

  • 来自相机的原始图像数据

    我一直在这个论坛上上下搜索 但找不到我真正需要的东西 我想从相机获取原始图像数据 到目前为止 我尝试通过该方法从 imageDataSampleBuffer 中获取数据captureStillImageAsynchronouslyFromC

  • 如何组合多个 TypeScript 类装饰器？

    我有一个类装饰器家族 我在很多类中重复使用它们 与此类似的东西 foo bar baz export class MyClass 由于我在多个类中使用这三个装饰器 我真的很想将其分解为一个装饰器 如下所示 standard export c

  • 如何获取 C# 中所有已加载类型的列表？

    我需要检索从给定的程序集加载的所有枚举 List

  • 导入错误？ （Python 3.2）

    我有自己的名为 v systems 的模块 并且我正在尝试将该模块导入到另一个 python 文件中 该文件也保存在与保存文件 v systems 相同的目录中 我需要将其导入为import v systems as vs或者即使我尝试导入

  • 以概率打乱 JS 数组

    假设我有一个像这样的数组 const alphabet a b c d 这代表 4 名政治候选人和一次等级选择投票 其中候选人a是首选 b是第二选择等等 我想将其打乱为一堆随机顺序 但在这种情况下我想要a大概以 60 的比例最先出现 b第二

  • Android Studio - 没有可调试的应用程序

    我尝试调试 Android 应用程序的发布版本 但 Android Studio 无法附加调试器 它找不到我正在运行的应用程序的 Android 进程 在设备控制台下 只有一条消息 没有可调试的应用程序 您还应该激活 工具 gt Andro

  • CMake 中的第三方库

    我在我的项目中使用 cmake 但我在子目录 例如 lib 中有另一个库 它使用普通的 Makefile 作为构建过程的一部分 如何指示 CMake 运行 lib 中的 Makefile 解决方案是使用 execute process CO

  • 安装后将 Javacard 小程序标记为隐式可选（默认小程序）

    我正在寻找一种方法 将小程序标记为隐式可选 默认选择 小程序 然后将其上传并安装在全球平台 http www globalplatform org JCOP 2 4 2 R1 http www nxp com products identi

  • 使用 JAVA 在 S3 存储桶上放置/读取文件

    我试图将文件放在 S3 上并使用 JAVA 从 S3 存储桶读取文件 但遇到无法执行 HTTP 请求 当我尝试列出存储桶时 它工作正常 对我来说 似乎只有 listBuckets 方法在工作 而所有其他方法 如 putObject list

  • Spring Reactive xml有效负载异常java.lang.IllegalStateException：无法解析类型为“reactor.core.publisher.Mono”的参数0

    我有一个春季启动应用程序 尝试通过邮递员将 xml 有效负载发送到 Post 请求 我得到以下内容例外 java lang IllegalStateException Failed to resolve argument 0 of type

  • Marathon 上的临时任务

    在此之前 我要说的是 我是 Mesosphere 堆栈的新手 我正在尝试将现有的 Rails 应用程序部署迁移到 Mesos 到目前为止我已经成功 但目前我正在运行迁移和种子 通过 Rake 任务 我没有看到一个很好的方法来实现它因为这些任

  • Linux 操作系统：/proc/[pid]/smaps 与 /proc/[pid]/statm

    我想计算单个进程的内存使用情况 经过一些研究后 我发现了 smaps 和 statm 首先什么是smaps和statm 有什么不同 statm 有一个 RSS 字段 在 smaps 中我总结了所有 RSS 值 但对于同一过程 这些值是不同的

  • 如何在 Vim 上将 inoremap/nnoremap 设置为“命令键”？

    我想将操作分配给 Vim 中的命令键 难道就没有什么方法吗 假设你使用的是 Mac 你无法在 vim 中映射命令键当它在终端模拟器中运行时 仅在 MacVim 中GUI 如果您使用 MacVim GUI 您的映射应该使用

  • Memcache获取密钥过期时间

    使用 memcached 和 php memcached 库 有没有办法在执行操作时获取当前密钥到期时间get http www php net manual en memcache get php 使用这个例子 它显示所有服务器密钥及其过

  • 需要在 python 测试用例中模拟一些基类行为

    我的标题相当具有描述性 但就这样吧 假设我有这个设置 class BaseClass object def init self pass def base function self param Hello World print para

  • Angular 控制台仅从 main.js:1 和 polyfills.js:1 记录日志

    我正在构建一个新的角度应用程序 在我执行 console log 的任何地方 它都来自 main js 1 或 polyfills js 1 而不是来自正确的组件 我尝试将 main js 和 polyfills js 添加到开发工具设置中

  • 如何从 Excel 获取输入并使用该值在 as400 中运行宏

    今天我正在研究as400宏 我需要对3000 条记录一一运行相同的宏 Excel 工作表在 A 列中以数字格式包含 3000 多行 每次我需要运行宏时 在此之前我需要使用 Excel A 列中的值更改 AS400 宏代码 下面是 AS400

  • 显示 NLTK 中的标签概率/置信度

    我正在使用 Python NLTK 库中的 MaxEnt 分类器 对于我的数据集 我有许多可能的标签 并且正如预期的那样 MaxEnt 仅返回一个标签 我已经训练了我的数据集并获得了大约 80 的准确率 我还在未知数据项上测试了我的模型 结

  • CSS 仅在 Div 中的其他图像保持饱和的情况下降低背景图像的饱和度

    我试图降低 div 背景图像的饱和度 同时使同一 div 内的图像保持饱和 我找到了一个与我想要做的事情接近的例子 除了模糊 但尝试了它的多种变体但没有成功 在下面的代码中 desaturate 类正确应用滤镜属性并将背景图像转换为黑白图像

热门标签