前端基础学习笔记 背景 渐变 倒影 遮罩
背景
首先分享一个css利用渐变实现的图案源代码网站: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; /*从内容区域开始,感觉是给背景图片设置padding;*/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 ;
前端基础学习笔记 背景 渐变 倒影 遮罩相关推荐
- 前端基础学习笔记(一)2018.02.26-03.22
HTML <!DOCTYPE> 告知浏览器的解析器用什么标准解析这个文档, 不存在或者格式不正确会导致文档以 兼容模式 呈现. HTML5 只需要写<!DOCTYPE HTML> ...
- 【UI界面设计】PS基础学习笔记
[UI界面设计]PS基础学习笔记 一.概述 1.行业规范: 2.介绍 二.PS入门 1.安装 2.基本介绍 3.新建项目 4.PS的基本使用流程 5.项目保存 6.抠图 7.修图 8.修人像图 9.如 ...
- 前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs)
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
- UE5 Shader基础学习笔记——13-20 DetailNormal/Smoothstep/Length/CeilFloorRound/DDXDDY/SinCos/Power
UE5 Shader基础学习笔记--13-20 DetailNormal/Smoothstep/Length/CeilFloorRound/DDXDDY/SinCos/Power Lec13 Deta ...
- UE5 Shader基础学习笔记——01-12 图形管线/创建shader/数学节点/贴图压缩/LerpDotUV/常用向量/坐标空间/MinMaxClampSaturate/法线贴图混合
UE5 Shader基础学习笔记--01-12 图形管线/创建shader/数学节点/贴图压缩/LerpDotUV/常用向量/坐标空间/MinMaxClampSaturate/法线贴图混合 Lec01 ...
- 前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
- 8. SpringBoot基础学习笔记
SpringBoot基础学习笔记 课程前置知识说明 1 SpringBoot基础篇 1.1 快速上手SpringBoot SpringBoot入门程序制作 1.2 SpringBoot简介 1.2.1 ...
- 【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位 三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
- 【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局 圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
最新文章
- Transformer的PyTorch实现
- linux chkconfig 添加服务 开机启动
- 数据库access和mysql_数据库access和MYSQL有什么区别?
- 字符统计2_JAVA
- 华润燃气各大区总经理_华润燃气助力空港国际新城,全面打造国家级智慧能源临空经济示范区...
- Linux常用命令3
- html 多层滚动,如何实现多个div同时滚动(3个以上)
- what is apache2 ?
- Alpha,Beta,RC,RTM,EVAL,CTP,OEM,RTL,VOL
- Windows下Cmder 安装及配置
- android视频编辑功能,万能视频编辑器
- elasticserach(一)
- Tegra3 1080p高清播放时电源管理方式和功耗分析
- Web Moudle
- Buffer(缓冲器)
- safari 调试 打印刚加载界面时缓存的log信息 iOS Safari调试iPhone设备上的网页
- 百度传课-php2小时超音速入门
- 微型计算机汇编语言与接口技术课后答案,微机原理、汇编语言及接口技术教程课后习题答案...
- 清华大学计算机学院武永卫,清华大学计算机科学与技术系导师简介:徐明伟
- 说真的,喜欢偶尔这样的激情解说!
热门文章
- 物理机安装linux系统,U盘在物理机安装linux系统
- 中望3D 2021 倒圆角
- Word2010入门
- 济南申报高企需要什么材料
- unity中单位是米还是厘米_cm在单位里是厘米还是毫米
- JS 报错getElementsByClassName.appendChild报错“Uncaught TypeError: s.appendChild is not a function”
- 怎么学python入门?python新手学习路线
- 静态博客网页中的网易云音乐播放器
- JAVA性能优化,从此不再重启tomcat服务
- linux内存管理之 ION 内存管理器浅析Ⅰ(system heap)