为大家介绍如何使用 CSS 来布局图片。
圆角图片
实例
圆角图片:
img {
border-radius: 8px;
}
实例
椭圆形图片:
img {
border-radius: 50%;
}
尝试一下 »
缩略图
我们使用 border
属性来创建缩略图。
实例
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="paris.jpg" alt="Paris">
尝试一下 »
实例
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
响应式图片
响应式图片会自动适配各种尺寸的屏幕。
实例中,你可以通过重置浏览器大小查看效果:
如果你需要自由缩放图片,且图片放大的尺寸不大于其原始的最大值,则可使用以下代码:
实例
img {
max-width: 100%;
height: auto;
}
尝试一下 »
提示: Web 响应式设计更多内容可以参考 CSS 响应式设计教程。
图片文本
如何定位图片文本:
实例
左下角左上角右上角右下角居中
尝试一下:
左上角 » 右上角 » 左下角 » 右下角 » 居中 »
卡片式图片
实例
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
图片滤镜
CSS filter
属性用为元素添加可视效果 (例如:模糊与饱和度) 。
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。
实例
修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
提示: 访问 CSS 滤镜参考手册 查看更多内容。
响应式图片相册
实例
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
尝试一下 »
图片 Modal(模态)
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
首先,我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后,我们使用 JavaScript 来显示模态窗口,当我们点击图片时,图片会在弹出的窗口中显示:
实例
// 获取模态窗口
var modal = document.getElementById('myModal');
// 获取图片模态框,alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
lt;marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=left></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定卷动距离
<marquee scrolldelay=300>...</marquee>设定卷动时间
<!>字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大
<!>区断标记
<hr>水平线
<hr size=9>水平线(设定大小)
<hr width=80%>水平线(设定宽度)
<hr color=ff0000>水平线(设定颜色)
<br>(换行)
<nobr>...</nobr>水域(不换行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>连结格式
<base href=位址>(预设好连结路径)
<a href=位址></a>外部连结
<a href=位址 target=_blank></a>外部连结(另开新视窗)
<a href=位址 target=_top></a>外部连结(全视窗连结)
<a href=位址 target=页框名></a>外部连结(在指定页框连结)
<!>贴图/音乐
<img src=图片位址>贴图
<img src=图片位址 width=180>设定图片宽度
<img src=图片位址 height=30>设定图片高度
<img src=图片位址 alt=提示文字>设定图片提示文字
<img src=图片位址 border=1>设定图片边框
<bgsound src=MID音乐档位址>背景音乐设定
<!>表格语法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
<!>分割视窗
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架
<! - - ... - -> 注解
<a href target> 指定超连结的分割视窗
<a href=#锚的名称> 指定锚名称的超连结
<a href> 指定超连结
<a name=锚的名称> 被连结点的名称
<address>....</address> 用来显示电子邮箱地址
<b> 粗体字
<base target> 指定超连结的分割视窗
<basefont size> 更改预设字形大小
<bgsound src> 加入背景音乐
<big> 显示大字体
<blink> 闪烁的文字
<body text link vlink> 设定文字颜色
<body> 显示本文
<br> 换行
<caption align> 设定表格标题位置
<caption>...</caption> 为表格加上标题
<center> 向中对齐
<cite>...<cite> 用於引经据典的文字
<code>...</code> 用於列出一段程式码
<comment>...</comment> 加上注解
<dd> 设定定义列表的项目解说
<dfn>...</dfn> 显示"定义"文字
<dir>...</dir> 列表文字标签
<dl>...</dl> 设定定义列表的标签
<dt> 设定定义列表的项目
<em> 强调之用
<font face> 任意指定所用的字形
<font face> 任意指定所用的字形
<font size> 设定字体大小
<form action> 设定户动式表单的处理方式
<form method> 设定户动式表单之资料传送方式
<frame marginheight> 设定视窗的上下边界
<frame marginwidth> 设定视窗的左右边界
<frame name> 为分割视窗命名
<frame noresize> 锁住分割视窗的大小
<frame scrolling> 设定分割视窗的卷轴
<frame src> 将html档加入视窗
<frameset cols> 将视窗分割成左右的子视窗
<frameset rows> 将视窗分割成上下的子视窗
<frameset>...</frameset> 划分分割视窗
<h1>~<h6> 设定文字大小
<head> 标示文件资讯
<hr> 加上分格线
<html> 文件的开始与结束
<i> 斜体字
<img align> 调整图形影像的位置
<img alt> 为你的图形影像加注
<img dynsrc loop> 加入影片
<img height width> 插入图片并预设图形大小
<img hspace> 插入图片并预设图形的左右边界
<img lowsrc> 预载图片功能
<img src border> 设定图片边界
<img src> 插入图片
<img vspace> 插入图片并预设图形的上下边界
<input type name value> 在表单中加入输入栏位
<isindex> 定义查询用表单
<kbd>...</kbd> 表示使用者输入文字
<li type>...</li> 列表的项目 ( 可指定符号 )
<marquee> 跑马灯效果
<menu>...</menu> 条列文字标签
<meta name="refresh" content url> 自动更新文件内容
<multiple> 可同时选择多项的列表栏
<noframe> 定义不出现分割视窗的文字
<ol>...</ol> 有序号的列表
<option> 定义表单中列表栏的项目
<p align> 设定对齐方向
<p> 分段
<person>...</person> 显示人名
<pre> 使用原有排列
<samp>...</samp> 用於引用字
<select>...</select> 在表单中定义列表栏
<small> 显示小字体
<strike> 文字加横线
<strong> 用於加强语气
<sub> 下标字
<sup> 上标字
<table border=n> 调整表格的宽线高度
<table cellpadding> 调整资料栏位之边界
<table cellspacing> 调整表格线的宽度
<table height> 调整表格的高度
<table width> 调整表格的宽度
<table>...</table> 产生表格的标签
<td align> 调整表格栏位之左右对齐
<td bgcolor> 设定表格栏位之背景颜色
<td colspan rowspan> 表格栏位的合并
<td nowrap> 设定表格栏位不换行
<td valign> 调整表格栏位之上下对齐
<td width> 调整表格栏位宽度
<td>...</td> 定义表格的资料栏位
<textarea name rows cols> 表单中加入多少列的文字输入栏
<textarea wrap> 决定文字输入栏是自动否换行
<th>...</th> 定义表格的标头栏位
<title> 文件标题
<tr>...</tr> 定义表格美一行
<tt> 打字机字体
<u> 文字加底线
<ul type>...</ul> 无序号的列表 ( 可指定符号 )
<var>...</var> 用於显示变数
果你是一个前端工程师,图片的处理你是肯定要会的,关于图片的Base64编码,你可能有点陌生,但是这是一个前端工程师应该要掌握的知识点,今天我们就一起来看一下吧。
Base64
Base64编码
那么什么是Base64编码呢?
Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性。
我们可以来看一下实际的效果
Base64编码效果
在上图中,我们可以看出img的src属性开头是data:image/png;base64,这种开头表示的就是Base64编码后的图片格式,鼠标放在src属性上,可以看出实际的图片。
图片采用Base64编码后的字符串非常长,这里截取一部分来看下效果
Base64编码的部分字符串
真实的全部字符串会比这长的多,可能达到几十KB
当然,Base64编码并不只是用在图片处理上,还可以用在URL转换上,比如说我们常见的迅雷以thunder开头的专用地址,就是通过Base64加密处理过后的URL地址,如下图所示
Base64处理后的URL
为何使用Base64编码
存在及必然,那么我们为什么要使用Base64编码呢?
1.其中很重要的一点就是,使用Base64编码可以减少网络请求。
我们都知道,网页上的图片资源如果采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。而采用Base64格式的编码,将图片转化为字符串后,图片文件会随着html元素一并加载,这样就可以减少http请求的次数,对于网页优化是一种比较好的手段。
2.采用Base64编码的图片是随着页面一起加载的,不会造成跨域请求的问题。
3.不会造成清理图片缓存的问题
Base64编码劣势
Base64编码既有优势也有劣势,上述已经说了Base64编码的优势,接下来看看劣势。
1.当我们将一个只有几KB的图片转化为Base64格式编码,生成的字符串往往会大于几KB,如果将其写在一个css文件中,这样一个css文件的大小会剧增,造成代码可读性差不说,还会造成请求传输的数据量递增。
2.如果我们将Base64位的编码的图片存入数据库中,会造成数据库数据量的增大,这样的效果还不如将图片存至图片服务器,而只在数据库中存入url字段。
3.对于IE8以下的浏览器,不支持data url格式,IE8开始支持data url,却对大小作出了限制,在使用时不是很方便。
如何使用
分析了Base64编码的优劣,那么我们该如何正确的使用Base64编码呢?这里总结出使用Base64编码的几个地方。
对于极小或者极简单的图片,例如只有几像素的图片
不用考虑跨域问题
不想页面的图片缓存
总结
关于Base64编码的图片,有其优势,也有劣势,需要我们自己总结,
今天的内容,了解了吗?
*请认真填写需求信息,我们会在24小时内与您取得联系。