前端基础学习笔记背景渐变倒影遮罩

太过爱你忘了你带给我的痛 2022-04-05 15:09 170阅读 0赞

# 背景 #

首先分享一个css利用渐变实现的图案源代码网站：[https://leaverou.github.io/css3patterns/][https_leaverou.github.io_css3patterns]

### **background-size: X Y;改变背景图片的大小** ###

具体的值px   
百分比  相对于元素框    
**cover** 保持宽高比不变，等比例放大缩小，图片四条边轴都铺满盒子    
**contain**  同上，上面的区别是水平或者垂直方向其中一个占满盒子就停下来

**多背景**

background-image:url('1.jpg'),url('2.jpg');

每个图片引入都要加url 并且用逗号隔开，先执行前面的样式！如果要实现背景图片和背景颜色共存，要把背景颜色属性写在最后一个图片的url的后面！不能再单样式写法里面直接写norepeat

### **background-origin背景图片的起始位置** ###

div{
        background-origin:padding-box; /*默认 从padding内容开始显示*/
        background-origin:content-box; /*从内容区域开始,感觉是给背景图片设置paddin
        g;*/
        background-origin:border-box; /*从border区域开始*/
    }

### background-clip 背景显示位置 裁剪 ###

规定背景图片在什么范围可见，规定之外的地方就会被裁剪掉，和 background-origin 的区别是从哪里开始 和 从哪里裁剪。

div{
        background-clip:border-box; /*border区域外全部剪掉*/
        background-clip:content-box; /*内部区域以外全部剪掉*/
        background-clip:padding-box; /*padding区域外全部剪掉*/
    }

-webkit-background-clip:text;把除文字以外的区域全部剪掉，可以做成艺术字。

### 复合属性 ###

这里要注意的的是，backgroundsize前面加一个反斜杠 放在那里都可以，但是为了方便阅读，可读性更高，顺序不要打乱。

/*背景图片 背景重复 背景位置/背景大小 背景起始 背景裁剪 背景关联 背景颜色*/
    div{
        background:url('') no-repeat center/cover padding-box border-box fixed #666;
    }

# 新增颜色 #

**新增hsl() 和 hsla() 颜色**

hsl将颜色值以360度的方式变成一个圆形

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360，   
S：Saturation(饱和度)。取值为：0.0%  100.0%，   
L：Lightness(亮度)。取值为：0.0%  100.0%。

/*用hsl写一个红色*/
    background:hsl(360,100%,50%);

### 线性渐变 ###

CSS lineargradiend() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型，是一种特别的 <image> 数据类型。  
<gradient>  是一种 <image> CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。   
<gradient>  没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。

/* 渐变轴为45度，从蓝色渐变到红色 */
    linear-gradient(45deg, blue, red);
    /* 从右下到左上、从蓝色渐变到红色 */
    linear-gradient(to left top, blue, red);
    /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
    linear-gradient(0deg, blue, green 40%, red);

注意：如果你只有两种颜色！第二个值即使规定了大小！也是占满后面的全部内容！

**repeating-linear-gradient 重复线性渐变**

创建一个由重复线性渐变组成的 <image> ， 这是一个类似 lineargradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个<gradient>  数据类型的对象, 这是一个特殊的 <image> 类型。

background: repeating-linear-gradient(45deg,red 0px ,red 20px,blue 20px,blue 40px);

### **radial-gradient 径向渐变** ###

由从原点放射两种或多种颜色之间的渐进转换的图像。其形状可以是圆形或椭圆形。

radial-gradient(circle at center, red 0, blue, green 100%);

/*形状 大小 位置 颜色 颜色
    */
    radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-
    stop>]+)

**属性详细讲解：**

<position> ：主要用来定义径向渐变的圆心位置。此值类似于CSS中backgroundposition属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”X 和 Y 方向  
<shape> ：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”  
<size> ：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthestcorner”。可以给其显式的设置一些关键词，  
closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边；  
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角；   
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边；   
farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角；

**重复的镜径向渐变**

background: repeating-radial-gradient(red 0px ,red 20px,blue 20px,blue 40px);

# 倒影 webkitboxreflect  #

可以在元素的一个特定方向有倒影！   
此属性是谷歌浏览器私有属性！不建议在开发项目中大规模使用！

img{
        display:block;
        -webkit-box-reflect:below 10px linear-gradient(left，red，blue);
        -webkit-box-reflect:below 0 url('images/hello.png');
    }

direction  （倒影对象的位置） = above上 below下 left左 right右    
offset （定义倒影和对象之间的间隔,可以为负值）    
maskboximages  遮罩图像url（）

# masks 遮罩 #

定义：允许通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。

div{
        /*遮罩图像*/
        -webkit-mask-image:url('');
        /*遮罩平铺*/
        -webkit-mask-repeat:no-repeat;
        /*遮罩位置*/
        -webkit-mask-position:关键词 px 百分比;
        /*遮罩大小*/
        -webkit-mask-size:px 百分比;
    }

复合写法：(和background相同)

mask: url(“”) 50px 30px/10px 10px repeatx ;

[https_leaverou.github.io_css3patterns]: https://leaverou.github.io/css3patterns/