PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录
一、PS的安装
二、背景(background-color、background-image、 background-repeat、background-position、background-clip、background-origin、background-size、background-attachment)
三、背景练习(背景重复—导航条的背景颜色是渐变的)
四、背景练习(按钮练习)
五、雪碧图
六、线性渐变
七、径向渐变
八、电影卡片练习
一、PS的安装
ps安装后,默认单位是厘米,我们应修改为像素
右击图中位置,选择”界面选项“ —— 单位与标尺—— 把单位改为像素
ctrl + R 可以将标尺显示出来,同时可以直接拖动标尺做辅助线 ,还可以直接拖回去
PS切图
PS有很多的切图方式:图层切图、切片切图、PS插件切图
ctrl + E 合并图层
二、背景(background-color、background-image、 background-repeat、background-position、background-clip、background-origin、background-size、background-attachment)
background-color 设置背景颜色
background-image 设置背景图片
使用 url( 绝对地址或相对地址指定背景图像) 指定图片路径,路径可以用引号引起来
- 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
- 如果背景图片小于元素,则背景图片会自动在元素中平铺将元素铺满
如果背景图片大于元素,将会有一部分背景无法显示
如果背景图片和元素一样大,则会直接正常显示
background-repeat 用来设置背景的重复/平铺方式
可选值:
repeat 默认值,背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position 用来设置背景图片的位置
设置方式:
通过 top right bottom left center 几个表示方位的词来设置元素图片的位置
使用方位词时必须要同时指定两个值,如果只有一个值,第二个值默认为center
通过偏移量来指定背景图片的位置
水平方向的偏移量 垂直方向的偏移量
background-clip 设置背景的范围
可选值:
border-box 默认值, 背景会出现在边框的下边
padding-box 背景不会出现在边框,只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量的计算的原点
padding-box 默认值 background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的偏移量从边框处开始计算
background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果只写一个,则第二个值默认为 auto
cover 图片的比例不变,将元素铺满
contain 图片的比例不变,将图片在元素中完整显示
background-attachment 背景图片是否跟元素移动,后期可以制作视差滚动的效果。
可选值:
scroll 默认值 背景图片会跟随元素移动
fixed 背景图片会固定在页面中,不会随元素移动·
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 500px;height: 500px;/* 边框下也有背景 */border:10px red double ;background-color: #bfa;/* background-image: url(./exercise/练习的截图/网易新闻.webp); */background-image: url(./exercise/JS143练习的图片/蓝色4.jpg);background-repeat:no-repeat;/* background-position:-10px 100px; *//* background-clip: content-box; */padding: 10px;/* background-origin:border-box ; */background-size:contain;overflow:scroll;}.box2{width: 300px;height: 1000px;background-color: orange;background-image: url(./exercise/练习的截图/京东上.png.webp);background-repeat: no-repeat;background-attachment: scroll;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>
background 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置,且该样式没有顺序要求,也没有哪个属性是必须要写的
注意:
1. background-size 要写到background-position后面,且需要用斜杠隔起来
如:center center/contain,必须要写在background-position 的后面
2. background-origin 和 background-clip 两个样式的属性值相同,它俩有顺序要求,background-origin 要写在前面,background-clip写在后面
背景颜色半透明
background: rgba(0,0,0,0.3) 最后一个参数是alpha透明度,取值范围在0~1之间
习惯性把0.3 的0省略掉,即写为background: rgba(0,0,0,.3)
三、背景练习(背景重复—导航条的背景颜色是渐变的)
导航条从上到下是渐变的,可以从导航条上取一个像素大小的块,把这一个像素在元素直接进行水平方向的重复
在ps中使用矩形选择工具选择一个宽为1像素高为导航条高度的块,然后点击”图像“——”裁剪“,保存到桌面,得到一个像素大小的块
将该图片放到项目中,使用background-image导入,并设置元素的background-repeat为repeat-x
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 990px;height: 32px;/* background-image: url(./练习的截图/pg.png);background-repeat: repeat-x; */background:url(./练习的截图/pg.png) repeat-x;margin: 0 auto;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
四、背景练习(按钮练习)
ctrl + f5 强制清除缓存刷新
注意:
图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载
浏览器加载外部资源时是按需加载的,用则加载,不用则不加载
像我们上边的练习link会首先加载,而hover和active会在指定状态触发时才会加载
这样会使在每次指定状态第一次触发(由于浏览器的缓存机制,第一次触发后不会再在加载)时,加载页面可能会出现闪烁
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>a:link{display: block;width: 93px;height: 29px;background-image: url(./练习的截图/link.png);}a:hover{background-image: url(./练习的截图/hover.png);}a:active{background-image: url(./练习的截图/active.png);}</style>
</head>
<body><a href="javascript:;"></a>
</body>
</html>
五、雪碧图/精灵图
精灵技术的目的:为了有效地减少服务器接收和发送请求的次数,提高网页的加载速度。
解决图片闪烁问题:
可以将多个小图片保存到一个大图片中,然后通过调整background-position来显示图片
这样图片就会同时加载到网页中,就可以有效的避免出现闪烁的问题
这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图/精灵图
使用精灵图核心:
1. 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图或者 雪碧图
3. 移动背景图片位置,此时可以使用 background-position
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>a:link{display: block;width: 93px;height: 29px;background-image: url(./练习的截图/btn.png);}a:hover{background-position: -93px;}a:active{background-position: -186px;}</style>
</head>
<body><a href="javascript:;"></a>
</body>
</html>
雪碧图的使用步骤:
1. 先确定要使用的图标
2. 测量图标的大小
3. 根据测量结果创建一个元素
4. 将雪碧图设置为元素的背景图片
5. 设置一个偏移量以显示正确的图片(因为一般都是往上往左移动,所以数值是负值)
千万注意网页中的坐标:x轴右边走是正值,左边走是负值,y轴同理
雪碧图的特点:
一次性将多个图片加载进页面,降低请求次数,加快访问速度,提升用户的体验
局限:只适用于背景图片,若是img则不可以
六、线性渐变
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果
!!渐变是图片,需要通过background-image来设置
linear-gradient() 线性渐变,颜色沿着一条直线发生变化,可以写多个颜色
linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域,注意两个颜色间加逗号,
- 线性渐变的开头,我们可以指定一个渐变的方向
to left
to right
to bottom 默认值
to top
xxxdeg deg表示度数
xxxturn turn表示圈
如 linear-gradient(to left,red,yellow),用逗号隔开
linear-gradient(180deg,red,yellow)
- 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布
也可以手动指定渐变的分布情况,在颜色后面写,与颜色无需逗号隔开
linear-gradient(180deg,red 50px,yellow 100px) 表示红色最浓的区域从50px开始,之前的也是红色最浓的
repeating-linear-gradient() 可以平铺的线性渐变
如repeating-linear-gradient(red 50px,yellow 100px)表示50-100为渐变,然后别的位置进行重复
background-repeat: no-repeat 不会对其产生影响
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 200px;height: 200px;/* background-color: #bfa; */background-image: linear-gradient(to left,red,yellow);background-image: linear-gradient(180deg,red 50px,yellow 100px);background-image: repeating-linear-gradient(red 50px,yellow 100px);background-repeat: no-repeat;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
七、径向渐变
radial-gradient( ) 径向渐变(放射性的效果)
默认情况下,径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形
- 我们可以手动指定径向渐变的大小 如radial-gradient(100px 100px,red, yellow)
repeating-radial-gradient(100px 100px,red, yellow)
circle 圆形 radial-gradient(circle,red, yellow)
ellipse 椭圆
- 也可以指定渐变的位置,用at 如radial-gradient(100px 100px at 100px 100px,red, yellow)
- 语法:
radial-gradient(大小 at 位置,颜色 位置,颜色 位置)
大小:
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
自己指定像素值
位置:
top right left center bottom 自己指定像素值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 300px;height: 300px;background-image: radial-gradient(closest-side at 100px 100px,red, yellow);}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
八、电影卡片练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./fontawesome/css/all.css"><style>.outer{width: 240px;/* 设置阴影 */box-shadow: 0 0 10px rgba(0,0,0,.3);}/* .img-wrapper{border: 1px solid red;} *//* 设置图片 */.img-wrapper img{width: 100%;/* 图片与元素有间隙,基线要去掉 */vertical-align: top;}.info{padding: 0 18px;color: #acaaaa;font-size: 14px;}/* 设置标题 */.info .title{font-size: 18px;color: #717171;margin: 13px 0 15px 0;}.info .category i{margin-left: 4px;margin-right: 7px;}/* 设置简介样式 */.info .intro{/* margin-left: 4px;margin-top: 18px;margin-bottom: 18px; */margin: 18px 4px;line-height: 20px;}/*设置下边的内容 */.star-wrapper{height: 46px;border-top: 1px solid #e9e9e9;line-height: 46px;color: #ddd;padding: 0 16px;}/* 设置星星样式 */.star{float: left;}.star-wrapper .light{color: #b9cb41;}.star-wrapper .weibo{float: right;}</style>
</head>
<body><!-- 创建一个外层容器 --><div class="outer"><!-- 创建图片容器 --><div class="img-wrapper"><!-- 设置图片 --><img src="./exercise/练习的截图/movie.png" alt=""></div><!-- 创建内容区容器 --><div class="info"><h2 class="title">动画电影</h2><h3 class="category"><i class="fas fa-map-marker-alt"></i>动画</h3><p class="intro">这是一部迪士尼的动画电影,非常非常的好看</p></div><!-- 创建评分的容器 --><div class="star-wrapper"><!-- 创建星星 --><ul class="star"><li class="fas fa-star light"></li><li class="fas fa-star light"></li><li class="fas fa-star"></li><li class="fas fa-star"></li></ul><!-- 创建 --><ul class="weibo"><li class="fab fa-weibo"></li></ul></div></div>
</body>
</html>
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground相关推荐
- 前端基础入门之背景background-image 、 雪碧图与渐变
文章目录 背景 1. PS 的基本设置 2. 背景 练习 1:线性渐变效果的背景图 练习 2:按钮点击效果 雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变 背景 1. PS 的基本设置 工 ...
- 前端工程师实战17:详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
- CSS 背景图标(雪碧图、精灵图、iconfont)
目录 雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
- gulp 安装步骤 及实现雪碧图(例子)
首先 安装node.js工具在 node基础上安装cnpm 再安装gulp 先 全局安装gulp cnpm install gulp -g 再局部项目安装gulp cnpm install gulp ...
- 雪碧图 以及 渐变色
今天学习了雪碧图和渐变色的知识 1. <style> a{ display: block; width: 470px; height: 497px; background-image: u ...
- Web前端之背景、雪碧图
目录 一.背景 二.雪碧图 一.背景 background-color 设置背景颜色 background-image 设置背景图片 如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满 ...
- html元素背景与雪碧图
元素背景: 例如: background-position:100px 100px; background-position:top left; 第一种形式更精确些 简写: 雪碧图(css-sprit ...
- CSS中背景颜色、背景图片、渐变色、背景定位、精灵图(雪碧图)介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
- 背景的样式(雪碧图)
目录 一.背景的基础设置 1.background-color : 设置背景颜色 2.background-image:来设置背景图片 3:background-repeat:用于设置背景图片的重复方 ...
最新文章
- linux查询首字符不是T,linux – tload输出中的不同字符是什么意思?
- OpenMP的一点使用经验
- Ardino基础教程 16_一位数码管
- 《算法基础》——2.3 求幂运算
- 改变vim注释的颜色
- java.net.sockettimeoutexception read timed out
- Linux的环境变量配置
- uwsgi --http :8888 --wsgi-file test.py(无法部署)
- Module-Zero之组织单元(OU)管理【新增】
- YOLOv3: An Incremental Improvement
- 架构学习----消息队列
- php数据库之mysql (where 、order By 、 Update)
- SAP 常用系统函数
- MS Navision专业BBS
- jupyter notebook报错500 : Internal Server Error
- 我的Pocket PC设备可以使用哪些附件?(转)
- python编程语言特点有哪些-Python语言的特点有哪些?九大特点介绍!
- Matlab保留工作区变量教程
- 一个可以不被广告拦截器拦截的弹出窗口
- mysql安装2503,无法安装msi格式软件提示错误代码2502、2503怎么办?
热门文章
- 19 误差分布曲线的建立 - 高斯导出误差正态分布
- html页面阅读pdf,HTML5在线PDF格式文件阅读器
- [数据库]MySQL-front6.1连接Mysql8.0失败解决
- 平安入选人工智能“国家队” 金融壹账通将搭建三层开放平台
- 平安壹账通陆一帆:通过牺牲区块链价值来达到隐私保护,无价值无意义
- ServletFileUpload 简单介绍
- 前端cookie设置及有效时间
- QML项目-ROSON课堂(仿腾讯游戏平台WeGame)
- 微软用户服务器ldap,如何处理 LDAP 服务器 Cookie
- Excel效率提升|解决不完全匹配数据整理