css - 混合混合模式不适用于 elementor wordpress 网站

标签 css wordpress elementor mix-blend-mode

作为我的网站http://newwebsite.outfit24.com.au (仍在构建中)是基于图像的,我希望标题文本颜色发生变化,以便它从背景(深色和浅色图像)中脱颖而出。我已经使用 Elementor 来批量构建我的网站,并且我正在使用“自定义 CSS 和 JS”插件来编写我的 CSS 并更改标题颜色。在 elementor 中,我将标题 CSS 类设置为“custom-header”。

我试过使用“mixed-blend-mode: difference;”但是 mixed-blend-mode 突出显示为红色并且似乎不起作用。这是 mix-blend-mode 不起作用的屏幕截图:https://ibb.co/MNbf84z

.custom-header a{
    color:#fff!important; 
}
.custom-header {
    mix-blend-mode:difference!important; 
}

我希望 CSS 能够工作,更改标题的颜色,使其无论在#fff、#000 和网站上的任何图像前面都可见,但出于某种原因,mix-blend-mode 是突出显示为红色且无法正常工作。有谁知道为什么会这样?

感谢您的帮助:)

最佳答案

当您对该部分或其父部分有任何 z-index 值时,混合模式不起作用。

关于css - 混合混合模式不适用于 elementor wordpress 网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56853171/

相关文章:

internet-explorer - 谷歌地图和 CSS 缩放

jquery - 使用 CSS 和 jQuery 在 Google Apps 脚本 HtmlService WebApp 中叠加图像

html - 何时在 Django 中使用 as_hidden,为什么不只显示 : none; in CSS?

css - 如何禁用此 Div 标签?

php - 数组中的两个 PHP 值

sql - elementor 在哪里存储从前端 View 创建的内容中的数据?

wordpress - WooCommerce 产品网格(重新排列产品详细信息)

wordpress - 在 Wordpress 中将 zip 文件上传到 Elementor

css - 如何使 float 元素旁边的内容相对于包含元素居中?

javascript - 缺少桌面导航