css背景颜色透明度属性 基础知识css背景( 三 )

border-box
默认值 。背景绘制在边框方框内(剪切成边框方框) 。
padding-box
背景绘制在衬距方框内(剪切成衬距方框) 。
content-box
背景绘制在内容方框内(剪切成内容方框) 。
这个属性类似于 background-origin,只不过它会裁剪背景图片 , 如下示例:

css背景颜色透明度属性 基础知识css背景

文章插图

css背景颜色透明度属性 基础知识css背景

文章插图
9、背景层的混合模式 —— background-blend-mode
所谓混合模式就是将图片与颜色或图片与图片进行混合 , 语法:
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;属性值:
css背景颜色透明度属性 基础知识css背景

文章插图
示例如下:
css背景颜色透明度属性 基础知识css背景

文章插图
正常模式
css背景颜色透明度属性 基础知识css背景

文章插图
luminosity 亮度模式
css背景颜色透明度属性 基础知识css背景

文章插图
color 颜色模式
其它模式可以自己试试,看下有什么区别 。
到此,我们了解了颜色和背景的使用方法,尤其是背景的使用,由于它的属性很多,可以简写也可以分开写 , 要想完全掌握 , 还得多练习,每种属性进行组合使用看看其效果 。
一般建议使用 background 简写方式,主要是可以少写很多代码 。以上介绍难免有误 , 或不齐全,欢迎指出错误,并补充 。