html 的css骚操作,CSS骚操作 --- 制作不同背景的字体

Document

.container{

position: relative;

height: 600px;

}

.pic{

position: relative;

width: 100%;

height: 100%;

background: url('./jinse.jpg');

}

.text{

position: absolute;

font-size: 9rem;

left: 0;

top: 0;

background-color: white;

width: 100%;

height: 100%;

mix-blend-mode: lighten;

}

金色传说

效果图

金色字体.png

主要用到的是mix-blend-mode: lighten;这个css属性

使用 表示应该应用的混合模式。可以有多个值，用逗号分隔。

语法

Formal syntax: where = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminositymix-blend-mode: normal;

mix-blend-mode: multiply;

mix-blend-mode: screen;

mix-blend-mode: overlay;

mix-blend-mode: darken;

mix-blend-mode: lighten;

mix-blend-mode: color-dodge

mix-blend-mode: color-burn;

mix-blend-mode: hard-light;

mix-blend-mode: soft-light;

mix-blend-mode: difference;

mix-blend-mode: exclusion;

mix-blend-mode: hue;

mix-blend-mode: saturation;

mix-blend-mode: color;

mix-blend-mode: luminosity;

mix-blend-mode: initial;

mix-blend-mode: inherit;

mix-blend-mode: unset;

规则

说明

初始值

normal

适用元素

all elements

是否是继承属性

否

适用媒体

visual

计算值

as specified

Animation type

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

Creates stacking context

yes