php的优势和背景,CSS_CSS 多图片融合背景定位的应用于优缺点分析,1. 关键字, 例如: background-positio - phpStudy...
1. 关键字, 例如: background-position: top right;
优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.
2. 像素, 例如: background-position: 0px 0px;
优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.
3. 百分比, 例如: background-position: 80% 50%;
优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位.
Percentage positioning of background-imageUntitled Document
body {
font-family:Arial, Helvetica, sans-serif
}
.box1, .box2, .box3, .box4 {
float:left;
margin-right:1em;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(http://files.phpstudy.net/demoimg/200912/1234.png) no-repeat;
font-size:9px;
text-align:center;
}
.box1 {
background-position:0% 0%;
}
.box2 {
background-position:35% 0%;
}
.box3 {
background-position:66.6666666666666% 0%
}
.box4 {
background: #F3F2E2 url(http://files.phpstudy.net/demoimg/200912/1234.png) 100% 0% no-repeat;
}
.wrap {
clear:both;
overflow:hidden;
}
p {
clear:both;
overflow:hidden;
}
background-position:
0% 0%
background-position:
0% 33.33333%
background-position:
0% 66.66666%
background-position:
0% 100%
DIVs set at 100px X 100px with their background-image
set as the sprite graphic
The original sprite graphic.
提示:您可以先修改部分代码再运行
原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.
在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?
经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.
优点:
1. 1 + 1 < 2
图标放在一起, 可以令图标的总容量稍小一点. 这不是最重要的, 但我可以告诉你, 很多程序员都是完美主义者.
2. 让连接次数大量减少
用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 “已下载图片/图片总数”. 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.
3. 让浏览器将图标预先下载
浏览器为了尽快地显示页面, 一般只是将打开页面时用到的图片下载到本地, 而一些可能用到, 但没有立刻被用到的图片需要在应用的时候再进行下载. 最经典的例子可能是导航菜单的 Tab 图标, 如果普通状态的 Tab 图标和鼠标悬停时的图标都是独立放置的, 那么当你鼠标移动到 Tab 按钮时, 图标才开始下载, 这样会带给用户很不好的视觉效果. 所以我觉得遇到这种情况时, 将多个图标合并在一起的处理是必须的.
缺点:
1. 图片难以管理, 难以定位
如果你要更换一个图标, 那么你需要编辑整个大图片. 如果你要改变一个图标的大小, 很可能你需要重新计算它的位置, 甚至无从下手, 只能在别的位置再添加一个图标.
2. 2 > 1
两个图标合成的图片是肯定比其中一个图标独占的图片大的, 也就是说, 下载这个图片所需的时间将比单独一个图标用的时间长. 浏览器显示图片一般都是下载完则显示或者边下载边显示的, 如果你那几个图标组成的图片容量比较大, 那么它们不能逐个显示予用户, 会造成很不好的用户体验.
应用:
1. 让图标尽量排列得有规律
有规律地排放的图标跟容易定位和维护, 这里的间隔可以使用 16, 32, 48, 96 等标准尺寸.
2. 将背景颜色一致的图标放置在一起
如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆.
3. 将相同栏目的图标放置在一起
这样可以少写一些 CSS 代码. 设置一个 background, 再在每个项设置 background-position 就行了.
4. 不要将大图绑在一块
大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读, “不耐烦” 会驱使他们去点 close.
拓展:
万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样可以为你省下一些资源, 也可以满足你追求完美的虚荣.
但切忌过度. 并不是所有东西都可以绑一块的, 没有人会将洗衣粉和饼干缠在一起的. 将有相关性的, 或者特别零碎的放在一起都是可以的, 我相信聪明的你一定会有自己的一套分类方法.
php的优势和背景,CSS_CSS 多图片融合背景定位的应用于优缺点分析,1. 关键字, 例如: background-positio - phpStudy...相关推荐
- 利用PPT删除图片背景(PPT图片删除背景)
PPT中,双击图片,导航栏"格式"中有个"删除背景"按钮,依次点击(如图浅蓝色方框) 可以调整需要保留的图片尺寸,剩余背景部分便会被删除. 点击其他空白区域,背 ...
- CSS的背景——颜色,图片,背景图片位置,
1 颜色--代码展示 <style> div { width: 200px; height: 200 ...
- 计算机背景图片失落】,背景失落漫画图片
失落作为一种情感,而且它的意境很美,有很多人喜欢失落的背景漫画图.今天先和学习啦小编一起欣赏这些背景失落漫画图片,希望你会有所收获的. 背景失落漫画图片欣赏 背景失落漫画图片1 背景失落漫画图片2 背 ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
- php 给图片增加背景平铺水印代码
如果你想利用php 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. 如果你想利用php教程 给图片 ...
- 前端开发中如何将文件夹中的图片变为背景图_Web中的图像技术全面总结,长文干货!...
前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术.它可以是HTML ,也可以是通过CSS背景生成的图片,也可以是SVG .选择正确的技术很重要,并且可以在性能和可访问性方面发挥巨大作用. ...
- ionic4 背景设置动态图片报错WARNING: sanitizing unsafe style value background-image:url
ionic4 背景设置动态图片报错WARNING: sanitizing unsafe style value background-image:url WARNING: sanitizing uns ...
- html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中 目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...
- 计算机wold标题文字加背景,office word文档添加背景图片以及背景颜色来美化枯燥乏味的文字...
在浏览网页的时候,遇到各式各样的好看图片是常用的事,现在的需求就是如何将这些看似比较不错的图片设置为Word的文档背景.设置背景的目的是为了美化文字的同时还可以为文档增姿添彩.看到这里大家是不是有点迫 ...
最新文章
- pandas根据数据类型筛选数据
- Openresty 预编译安装教程
- 64位java_一文详解 Java 的八大基本类型!
- debug信息关闭 tp6_「Flask实战2」设置debug模式
- Shell脚本中函数的定义和调用笔记
- OJ1069: 向Z同学学习
- 成都将于1月27日开启数字人民币红包活动
- 超市收银程序_思迅天店星耀版收银系统助力超市商品建档!
- 一个完整的HTTP请求过程详细
- 网站搜索引擎优化外链工具
- Excel怎么区分中文英文
- PS怎么调整字体的行间距
- 报告:使用加密货币进行跨境汇款的人数越来越多
- Linux(centos7) 安装配置gitlab-runner
- 二分图的匹配——匈牙利算法
- R语言线性判别分析(LDA),二次判别分析(QDA)和正则判别分析(RDA)
- VR家居为什么盛行?可以解决哪些传统家居的痛点?
- java插入数据库字段过长,【mybatis插入过长数据发生错误_mybatis】 | IT修真院·坑乎...
- Intellij Idea 好用插件之GsonFormat
- 腾讯垄断数据,滥用市场支配地位了吗?
热门文章
- 使用route-map 配置BGP本地优先级
- 利用Kickstart安装的方法
- 关于Uri.Segments 属性的理解
- servlet 访问项目
- Servlet Listener
- python 大量网络请求_大规模异步新闻爬虫之网络请求函数的优化
- django前后端结合_一图看懂Django和DRF
- api 定位 微信小程序 精度_微信小程序城市定位(借助百度地图API判断城市)
- php 怎么支持中文图片显示,php读取中文图片文件读不了,编码有关问题
- 解决html页面闪烁,解决前端页面闪烁问题(转载)