css mix-blend,CSS mix-blend-mode 属性

更多实例

实例

演示所有值：

.normal {mix-blend-mode: normal;}

.multiply {mix-blend-mode: multiply;}

.screen {mix-blend-mode: screen;}

.overlay {mix-blend-mode: overlay;}

.darken {mix-blend-mode: darken;}

.lighten {mix-blend-mode: lighten;}

.color-dodge {mix-blend-mode: color-dodge;}

.color-burn {mix-blend-mode: color-burn;}

.difference {mix-blend-mode: difference;}

.exclusion {mix-blend-mode: exclusion;}

.hue {mix-blend-mode: hue;}

.saturation {mix-blend-mode: saturation;}

.color {mix-blend-mode: color;}

.luminosity {mix-blend-mode: luminosity;}

实例

使用 mix-blend-mode 来创建响应式 cutout/knockout 文本(抠图文本)：

.image-container {

background-image: url("paris.jpg");

background-size: cover;

position: relative;

height: 300px;

}

.text {

background-color: white;

color: black;

font-size: 10vw;

font-weight: bold;

margin: 0 auto;

padding: 10px;

width: 50%;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

mix-blend-mode: screen;

}

css mix-blend,CSS mix-blend-mode 属性相关推荐

CSS：布局的三个关键属性：float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
css设置title字体_CSS中简写属性要注意TRouBLe的顺序，避免踩坑
简写属性是用于同时给多个属性赋值的属性.比如font是一个简写属性,可以用于设置多种字体属性.它指定了font-style.font-weight.font-size.font-height以及fon ...
html5后代选择符,css选择符有哪些？哪些属性可以继承？
属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS布局——display，position，float属性
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
[css] 写出主流浏览器内核私有属性的css前缀
[css] 写出主流浏览器内核私有属性的css前缀完善一下: Chrome:Blink内核 -webkit-Safari:WebKit内核 -webkit-Firefox :Gecko内核 -moz ...
[css] 举例说明css有哪些简写的属性和属性值？
[css] 举例说明css有哪些简写的属性和属性值? border: solid 1px red;border-style: solid; border-width: 1px; border-colo ...
[css] 举例说明跟字体相关的属性有哪些
[css] 举例说明跟字体相关的属性有哪些 font-size:字体大小 font-weight:字体粗细 font-family:字体类型 color:字体颜色等等个人简介我是歌谣,欢迎和大家 ...
[css] 举例说明与打印有关的属性有哪些？
[css] 举例说明与打印有关的属性有哪些? page page-break-before page-break-after page-break-inside 个人简介我是歌谣,欢迎和大家一起交流 ...
css 相同的css属性_CSS中的order属性
css 相同的css属性 CSS | 订单属性 (CSS | order Property) Introduction: 介绍: Web development is an ever-growing ...

css mix-blend,CSS mix-blend-mode 属性

css mix-blend,CSS mix-blend-mode 属性相关推荐

最新文章

热门文章