html正片叠底透明度,css3正片叠底(示例代码)

上图是在工作时候遇见的一个效果，ps里面的效果就是上面的，咋一看以为就是红色背景透明度，然后马上就搞最后发现效果完全不一样的。这个图是ps的正片叠底效果的。百度搜资料的时候，关键是 css3正片叠底会有好多资料，我这里就根据我自己的了解简单说一下这个正片叠底效果。

这个东西叫做css3 混合模式，背景混合啊图片和图片混的的。具体的我也没有搞清楚，我只是知道了这个正片叠底(图片与图片混合)模式

multiply正片叠底效果

这是html结构。div是有背景图片，就是上面图里面的老奶奶，img标签是红色的图片，纯红色不透明。

css如下：

div {width:640px;height:1008px;margin: 0 auto;

background: url(\'testimg/hel_bg.jpg\') center;

/*这里是背景图片*/

background-size: cover;

}

.multiply img { /*这个图片需要正片叠底的纯颜色图片，不透明，这里是红色*/

mix-blend-mode: multiply;

}

这样效果就是ps的正片叠低了，关键的属性就是img标签的

mix-blend-mode: multiply;、

上面的效果是在一个背景图片上面浮动了另一个图片，两个图片重合部分正片叠底了，下面的是另一种情况

/*-------情况二----------------*/

multiply

html结构，我注释掉了img标签，这个div里面没有图片标签了

css；

div {width:640px;height:1008px;margin: 0 auto;

background: url(\'testimg/hel_bg.jpg\') center;

background-color: red;

background-size: cover;

background-blend-mode: multiply;

}

这里就是div自己的背景图片和自己的背景颜色混合了，实现了正片叠低。注意只有一个元素div，这个div有背景图片和背景颜色。

background-blend-mode: multiply;是div属性，mix-blend-mode: multiply;是img的属性，两个东西有差别

html正片叠底透明度,css3正片叠底(示例代码)相关推荐

html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
html中如何使阴影正片叠底,css3正片叠底
上图是在工作时候遇见的一个效果,ps里面的效果就是上面的,咋一看以为就是红色背景透明度,然后马上就搞最后发现效果完全不一样的.这个图是ps的正片叠底效果的.百度搜资料的时候,关键是 css3正片叠底会 ...
css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
html常规的布局模版,html5/css3常规布局(示例代码)
简介这篇文章主要介绍了html5/css3常规布局(示例代码)以及相关的经验技巧,文章约2644字,浏览量165,点赞数6,值得推荐! content="initial-scale=1.0, ...
css3半圆弧线,css3实现画半圆弧线的示例代码
本文介绍了css3实现画半圆弧线的示例代码,分享给大家,具体如下: css代码 .circle1 { width: 100px; height: 200px; border: 1px solid bl ...
css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码展开收起唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻通:唯)问女何所思,问女何 ...

html正片叠底透明度,css3正片叠底(示例代码)

html正片叠底透明度,css3正片叠底(示例代码)相关推荐

最新文章

热门文章

html正片叠底 透明度,css3正片叠底(示例代码)

html正片叠底 透明度,css3正片叠底(示例代码)相关推荐

最新文章

热门文章

html正片叠底透明度,css3正片叠底(示例代码)

html正片叠底透明度,css3正片叠底(示例代码)相关推荐