美文网首页
13 ­ 第十三章:渐变+背景补充 +倒影,遮罩

13 ­ 第十三章:渐变+背景补充 +倒影,遮罩

作者: 晚溪呀 | 来源:发表于2018-10-31 23:00 被阅读0次

新增背景属性

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

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

多背景

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

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

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

当使用 background­-attachment 为fixed时,该属性将被忽略不起作用。

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

4.background-clip 背景显示位置 裁剪

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

 div{ 
      background-clip:border-box;   /*默认值,从border区域开始显示背景*/ 
      background-clip:content-box; /*从内部区域开始显示背景*/           
      background-clip:padding-box; /*从padding区域开始显示背景*/ }

5.复合属性

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

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

新增颜色

新增 hsl()hsla()颜色

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

HHue (色调)。0(或 360)表示红色,120 表示绿色,240表示蓝色,也可取其他数值来指定 颜色。取值为:0 – 360
SSaturation (饱和度)。取值为:0.0% ­ 100.0%
LLightness (亮度)。取值为:0.0% ­ 100.0%

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

演示在开发工具中选择颜色的工具 ----------------------------------------渐变色---------------------------------- ------- -----------线性渐变------------

CSS linear­gradiend() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属 于 <gradient>数据类型,是一种特数据类型。<image></gradient>

<gradient> 是一种 <image> CSS数据类型的子类型,用于表现两种或多种颜色的过渡转 变。</gradient>

<gradient> 没有内在尺寸;即,不具备固有或首选的尺寸,也不具备首选的比率。其实际的大小取决于其填充元素的大小。

渐变轴为45度,从蓝色渐变到红色
linear-gradient(45deg, blue, red);

从右下到左上、从蓝色渐变到红色
linear-gradient(to left top, blue, red); 

从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束
linear-gradient(0deg, blue, green 40%, red);

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

关于加兼容前缀的语法区别:现在不用考虑兼容写法,但是要了解一下

当使用带前缀的规则时,不要加 to 关键字。但是渐变的方向和不带前缀的时候写法是反着的。
加兼容前缀的角度也是不同的!正值是逆时针旋转!不加是顺时针旋转!

渐变低版本IE兼容

给低版本浏览添加滤镜 startColorstr=开始的颜色
**endColorstr=结束的颜色
GradientType=值是0的时候是左右 1是上下! 这里面的颜色必须要是全写模式,不能使用简写

.grad {
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000
000',endColorstr='#ff0000',GradientType='1');
}

repeating-linear-gradient 重复线性渐变

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

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

-----------radial-gradient 径向渐变------------
由从原点放射两种或多种颜色之间的渐进转换的图像。其形状可以是圆形或椭圆形。
标准写法:写法略有不同 不能使用角度 关键词是at

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

语法

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

关于加兼容前缀的语法区别:现在不用考虑兼容写法,但是要了解一下

当使用带前缀的规则时,不要加 at 关键字。

属性详细讲解:

<position> :主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性,用于确定元素渐变的中心位置。如果这个参数省略了,其默认值为“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);

倒影 ­-webkit-­box-­reflect

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

 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 (定义倒影和对象之间的间隔,可以为负值) mask­box­images 遮罩图像url()

above /ə'bʌv/ 在……之上
below 在……下面

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 repeat­x ;

相关文章

网友评论

      本文标题:13 ­ 第十三章:渐变+背景补充 +倒影,遮罩

      本文链接:https://www.haomeiwen.com/subject/wsjztqtx.html