首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果在父div上使用"transform“,则Mix-blend-mode不起作用

如果在父div上使用"transform"属性,会导致其子元素的Mix-blend-mode不起作用。这是由于CSS属性的继承规则以及元素层叠顺序引起的。

当父元素使用了"transform"属性时,子元素的混合模式将会被父元素的变换矩阵所影响。这样会改变子元素的位置和大小,使得混合模式效果不再符合预期。

为了解决这个问题,可以将需要应用Mix-blend-mode的元素移到父div之外,并使用绝对定位或其他布局方式来控制其位置。这样,子元素将不受父元素的变换矩阵的影响,Mix-blend-mode可以正常起作用。

示例代码如下:

代码语言:txt
复制
<style>
  .parent {
    transform: rotate(45deg);
    position: relative;
  }
  
  .child {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
  }
</style>

<div class="parent">
  <!-- 父元素使用了transform属性,子元素的Mix-blend-mode不起作用 -->
  <div class="child">
    ...
  </div>
</div>

<div>
  <!-- 将需要应用Mix-blend-mode的元素移到父div之外,并使用绝对定位控制其位置 -->
  <div class="child">
    ...
  </div>
</div>

推荐的腾讯云相关产品:CSS3和HTML5的特效可以使用腾讯云的 Web+ 来进行部署和托管。Web+是一个集Web开发、运营、托管、安全和监控于一体的全栈式PaaS云服务,适用于各类网站和应用的构建和管理。

更多关于腾讯云 Web+ 的信息和产品介绍可以访问:腾讯云 Web+

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

轻松使用纯css3打造有点意思的故障艺术(附React加强组件版)

正文 接下来笔者将带大家使用纯Css3来实现"故障动画", 并将这一特效封装成React/vue组件, 供大家学习和使用. 先来看看实现的效果: ?...实现原理 该效果的实现依赖于Css3的新特性mix-blend-mode和background-blend-mode.接下来笔者简单介绍一下: 1. mix-blend-mode 该属性描述了元素的内容应该与元素的直系元素的内容和元素的背景如何混合...: 趣谈前端 趣谈前端 复制代码 这里故障线我们采用伪元素来实现....组件的设计思想往往是设计的复杂性和使用的便捷性的博弈, 为了让使用者有更大的自由度, 往往会通过增加组件内部复杂度来弥补. 我们先来看看实现后的效果: ? ? ? ? ?

65510
  • CSS中的层叠上下文与顺序

    如下: z-index值不为auto的flex项(元素display:flex|inline-flex). 元素的opacity值不是1. 元素的transform值不是none....层叠顺序图可以找到答案,如下: 从上图可以看出负值z-index的层叠顺序在当前第一个层叠上下文元素的上面,而此时,那个z-index值为1的蓝色背景的元素的display值是flex,...需要注意的是,目前,IE浏览器(包括IE14)还不支持mix-blend-mode,因此,要想看到妹子在背景色之上,请使用Chrome或FireFox。...默认情况下,mix-blend-mode会混合z轴所有层叠在下面的元素,要是我们不希望某个层叠的元素参与混合怎么办呢?就是使用isolation:isolate。...z-index值与层叠顺序 如果元素支持z-index值,层叠顺序就要好理解些了,比较数值大小嘛,小盆友都会,本质是应用的“谁大谁上”的准则。

    95210

    CSS 实现“故障”特效

    而实际,是两个 J 形重叠在一起,重叠部分表现为白色,这个特性,使用 CSS 的混合模式 mix-blend-mode 非常好实现,而单个 J 形示意图如下: ?...关键点 利用 mix-blend-mode: lighten 混合模式实现两段文字结构重叠部分为白色 利用元素位移完成错位移动动画,形成视觉的冲击效果 看看效果: ?...使用 clip-path 实现文字断裂动画 我们还是使用元素的 ::before、::after 两个伪元素复制两份副本,再分别使用 clip-path 进行剪裁,再使用 transform 进行控制。...实现动画的关键在于: 使用元素的两个伪元素,生成图片的两个副本 使用 clip-path 对两个副本图片元素进行裁剪,然后进行位移、transform变换、添加滤镜等一系列操作。...在其中,transform、filter 也在其中发挥了很重要的作用。当然仅仅使用 transform、filter 也能够实现一些基础的故障艺术效果,这个读者们感兴趣的可以自己多加尝试。

    2.2K10

    【动画进阶】极具创意的鼠标交互动画

    这个了解混合模式(mix-blend-mode)的同学应该一下就能想到。...如果,我们给上述效果中的伪元素,添加一个 mix-blend-mode: difference,则会得到如下效果: div::before { content: ""; position: absolute...cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用图片 */ cursor: url(hand.cur) /* 使用图片,并且设置 fallback...由于现在的鼠标指针,实际是个 div,因此我们可以给它加上任意的交互效果。...通过 mouseout 事件,判断鼠标是否离开目标元素 如果鼠标悬停在目标元素计算当前吸附的目标元素的高宽、元素的 border-radius 及相对页面右上角的坐标 由于模拟的鼠标元素,本身就是绝对定位

    24310

    个人总结(css3新特性)

    个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!...上面两个按钮,第一个使用了过渡,第二个没有使用过渡,大家可以看到当中的区别,用了过渡之后是不是没有那么生硬,有一个变化的过程,显得比较生动。...上面两个菜单,第一个没有使用过渡,第二个使用过渡,大家明显看到区别,使用了过渡看起来也是比较舒服!代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名(ul-transition)。...这一块,我了解过,在项目没用过,但是我觉得这个应该不会没有用武之地! css3的混合模式,两个(background-blend-mode和mix-blend-mode)。...;"/> hue色相

    2.3K10

    CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    纯 CSS 实现波浪效果 在进入正题前,我们先复习下,使用 CSS 实现波浪,如果不是在镂空的文字内,而是在一个 div 容器内,可以使用滚动大圆的方式,类似于这样: 容器应用 overflow: hidden...我们首先尝试下,白底黑字,加上该效果: TEXT WAVE 核心的 CSS 伪代码如下: p { background...尝试使用让文字透明 我们要尝试让文字透明 可以使用 color: transparent 使文字透明 尝试使用 background-clip 实现 emmm,逐一尝试下。...Wow,当给两个波浪圆形加上 mix-blend-mode: lighten 时,成功的在白底上过滤掉了蓝色,只在黑色字体能够看到蓝色波浪的效果。...完整的代码你可以猛击:CSS 灵感 - 使用混合模式叠加实现文字波浪效果 最后 好了,本文到此结束,希望对你有帮助 本文没有详细的去讲混合模式 mix-blend-mode 的一些基础用法,感兴趣的同学可以自行研究

    99520

    不受控制的 position:fixed

    堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间..."的元素, mix-blend-mode 属性值不为 "normal"的元素, filter值不为“none”的元素, perspective值不为“none”的元素, isolation 属性被设置为...可戳: 层叠上下文对 fixed 定位的影响(不同浏览器下表现可能不一样) 我们设置两个父子 div,子元素 fixed 定位,通过修改元素生成层叠上下文,观察子元素的 fixed 定位是否不再相对视口... 最初的 CSS : .container { width:10vw;...或者是在 position: fixed 中使用了 input 也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。

    2.2K40

    神奇的 conic-gradient 圆锥渐变

    饱和度(S)是指色彩的纯度,越高色彩越纯,低逐渐变灰,取0-100%的数值。 明度(V),亮度(L),取0-100%。 这里,我们通过改变色相得到一个较为明亮完整的颜色色系。...使用 SCSS ,我们随机生成一个多颜色的圆锥渐变图案: 假设我们的 HTML 结构如下: CSS/SCSS 代码如下: @function randomNum($max, $min...想了解 mix-blend-mode 这个属性,可以戳我看看:不可思议的颜色混合模式 mix-blend-mode 如果多个圆锥渐变层级叠加,并且运用上 mix-blend-mode 会发生什么?...上图使用了 2 个半透明的圆锥渐变,相对反向进行旋转,并且在底层使用 mix-blend-mode: overlay 叠加了一个白黑径向渐变图层。...假设我们的结构如下: CSS: .bg { position: relative;

    1.2K40

    什么C3转换还可以这样玩???用CSS3实现2D转换、3D转换、3D呈现,详细总结及案例演示。

    (2,2)∶宽和高都放大了2倍 transform:scale(2)∶只写一个参数,第二个参数和第一个参数一样,相当于scale(2,2) transform:scale(0.5,0.5):缩小...2D转换的复合写法 如果涉及多个转换同时使用,那么可以复合来写。...如下代码是,当鼠标移动到div的时候,给它设置3D移动。...透视我们也称为视距 :视距就是人的眼睛到屏幕的距离 透视的单位是像素 透视写在被观察元素的盒子上面的 还是上面的例子,我现在给div元素加上透视,因为我body里面只有div,所以div元素就是...【3D呈现(transfrom-style)】 有时我们使用多个对象进行旋转的时候,发现一个奇怪的现象,明明设置了旋转,但旋转的时候,子元素的旋转属性却消失了,不起作用,这是应为我们没有设置3D呈现(transfrom-style

    81230

    CSS 中重要的层叠概念

    如果在第一张桌子旁还有第二张桌子,那第二张桌子就代表着另一个层叠上下文。 现在想象在第一张桌子上有四个小方块,他们都直接放在桌子。 在这四个小方块之上有一片玻璃,而在玻璃片上有一盘水果。...html标签中的一切都被置于这个默认的层叠上下文的一个层叠层(物品放在桌子)。...display:flex|inline-flex opacity 属性值小于 1 的元素 transform 属性值不为 none的元素 mix-blend-mode 属性值不为 normal 的元素...所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的级层叠上下文是否被其他层叠上下文盖住了。 4....Vue 响应式原理(完成) 新老 VNode 进行 patch 的过程 如何开发功能组件并上传 npm 从这几个方面优化你的 Vue 项目 从 Vue-Router 设计讲前端路由发展 在项目中如何正确的使用

    90950
    领券