css3背景,蒙版,渐变

一、CSS3背景

1、背景原点控制(background-origin :padding-box; (默认))

    border-box | padding-box | content-box
    background-origin是用来决定图片的原始起始位置

    它有三个可选值content-box,padding- box,border-box,即可以选择背景图片是从内容区域或者内边距或者边框开始显示。

2、背景剪切控制(background-clip )

    1).border-box | padding-box | content-box
    clip原意为裁剪,截取。
    background-clip的作用为将背景图片做适当的裁剪,以适应需要。
    background-clip有content- box,padding-box,border-box三个值
    剪裁方法:根据设置的盒子部位,那么图片在这个部位的外边缘以外的部分都会不可见。
    2).background-clip & background-origin

    图片起始位置是从border-box开始,但background-clip设置的值是content-box,在content之外,也就是border-box内,padding-box内的图片内容将统统不可见。尽管图片是从边框开始显示。

3、背景尺寸(background-size)

    1).length: 长度值---第一个值设置宽度,第二个值设置高度
    2).percentage: 百分比---第一个值设置宽度,第二个值设置高度
    3).cover:等比缩放到完全覆盖容器,背景图像有可能超出容器

    4).contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

4、透明背景(rgba)
    background:rgba(255,0,0,0.6)

    background-color:rgba(255,0,0,0.6); RGB Red Green Bule 3色!即255, 0, 0 三色的值混合.最后一个参数.0.6 则是指的透明度!1为100% 不透明!

二、渐变背景

1、渐变种类

    线性渐变:linear-gradient

    径向渐变 radial-gradient

2、语法:
    渐变:background:-webkit-linear | radial-gradient (水平起点 垂直起点 || 角度, 颜色1  0%, 颜色2  渐变到的位置百分比%, ... ,颜色N 100%);
    线性渐变&&径向渐变
    -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
    例如:
background:radial-gradient(at 55px 55px, #fff  1%,#000 100%);

background:-webkit-radial-gradient(50px 50px,#fff  1%,#000 100%);

    -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*); 

    例如:background:linear-gradient(to bottom,#000 0%,#fff 36%,#000 100%);

    注:在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

    径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

三、蒙版

1、蒙版知识点

1).可以使用图片或渐变作为遮罩层

-webkit-mask-image:url | gradient 
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content

-webkit-mask-origin:border | padding | content 

简写:-webkit-mask:url("04.png")  40px  55px  no-repeat;

目前只有webkit浏览器支持mask遮罩层

2、WEB中mask属性特点

    形状主要控制的是显示区域
    颜色对蒙版没有任何的影响

    透明度为显示图像的透明度


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35325795/article/details/80686606
个人分类: css3
上一篇css3分栏,响应式布局
下一篇sass基本用法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭