了解css技术基础之css设置图片的样式
概述
图片在网页设计中占据相当重要的位置。仅用文字建立的网站相对枯燥，使用图文结合是当今大部分网站设计的形式。使用css样式可以设置图片的大小和边框等属性。css没有提供针对图片样式的属性，但是恰当的使用css其他属性和配合页面排布也能创造出很精美的图片效果。
在网页中插入图片
在html中嵌入图片的方式是用img标签。
< img src="picture.jpg" />
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< /head >
< body > < img src="picture.jpg" /> < /body >
< /html >
以上是一个最简单的在网页中插入图片的方式。其中，src属性是指要插入的图片所在文件夹位置。可以是相对地址，也可以是绝对路径。
在浏览器上使用的图片类型有限，通常为gif和jpeg格式的图片。由于某些格式的图片不能在浏览器中显示，所以在插入网页图片前应先使用ps等图像处理软件进行图片格式转化。
控制图片的大小
在网页中放置的图片的原始大小往往与设计师需要的图片大小不同。css的width和height属性适用于控制图片的宽度和高度。
width:picwidth
height:picheight
其中picwidth和picheight可以使用任何长度单位来装饰。通常情况下使用像素为单位。 如果原始图片不是一比一的关系，在缩放或放大后会明显拉伸变形。要使图片不变形，可以使用百分比控制图片大小或单独控制高度（宽度） 。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ width:150px; height:150px}/*设置图片的宽度为150像素，高度为150像素*/
< /style >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
使用百分比设置图片的宽高能使图片按照等比例缩放。图片最终高度（或宽度）=img标签的父级元素的高度（宽度）X缩放百分比。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ width:50%; height:50%}/*设置图片的宽度为父元素的50%，高度为父元素的50%*/
< /style >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
单独设置图片的宽度，图片按照宽度缩放，高度是按照宽度的缩放比例自动变化，整张图片在缩放后比例不变。单独设置图片的高度，同样。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ width:200px; /*设置图片的宽度为200px*/
< /style >
< /head >
< body > < img src="picture.jpg" />
< /body >
< /html >
给图片添加边框的技巧
为放置在网页上的图片增加边框可以使用图片的边界清晰，排布整齐，也可以使图片更美观。
css的border属性适用许多元素，同样适用于图片。以下是使用border属性的通用语法：
border-width:width;设置边框的宽度
border-style:style;设置边框的样式
border-color:color;设置边框的颜色
其中border-width是指边框的宽度，width可以用任何长度单位设置，border-style是指边框的样式，style指的是设置边框样式的关键字。border-color是指边框的颜色，color可以用任何颜色单位设置。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ border-width:3px; border-style:solid; border-color:#F00 /*设置边框宽度为3像素；设置边框样式为实线；设置边框颜色为红色*/
< /style >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
边框属性不但可以添加边框，还可以在某些特定的场合去掉边框。
图片不显示的解决办法
由于网络传输等问题会造成网页上某些图片不能显示。在图片不能正常显示的情况下，为了让浏览者获悉图片包含的信息，应增加图片的替换文字。使用img标签的alt属性，能给图片增添替换文字。在图片不能正常显示的情况下，该替换文字就会出现在浏览器中。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ border-width:3px; border-style:solid; border-color:#F00 /*设置边框宽度为3像素；设置边框样式为实线；设置边框颜色为红色*/
< /style >
< /head >
< body >
< img src="picture.jpg" alt="该图片不能显示，该图片原为风景图片"/>
< /body >
< /html >
在网页上的图片常常被作为一个超链接，以下是把图片设置为可单击的链接的代码：
< a href=””>< img src=”picture.jpg” alt=”该图片不能显示，该图片原为风景图片”/ >< /a>
其中在a标签中的href属性后的#符号可以用任意网页地址替换。
文字环绕图片
合理排布图片和文字能使网页显得生动并且充满说服力。图文混排是网页制作的一项重要手段。
浙江网盛生意宝股份有限公司
浙江网盛生意宝股份有限公司（股票代码：002095，以下简称生意宝）是一家专业从事互联网信息服务、电子商务、专业搜索引擎和企业应用软件开发的高新企业。公司总部位于“电子商务之都”杭州，从化工行业B2B起家，目前已发展成为国内领先的行业电子商务运营商和综合B2B运营商。
2006年12月，生意宝在获中国证监会审核通过后顺利实现IPO，受到证券市场的热烈追捧，这意味着“国内纯互联网第一股”的诞生，自此，生意宝也扛起了自主创新与民族互联网创业的“大旗”，并由此改写了我国十余年资本市场和互联网产业的历史。公司上市具有重大的现实意义与历史意义，也正因为如此，生意宝上市被载入了我国互联网产业与资本市场的发展史，是中国近几年来少有的几家民族的开创性的上市互联网企业。
生意宝及其旗下子公司现有员工1000逾人，本身拥有一支由博士、硕士、学士组成的层次合理的运营团队，并先后在北京、上海、青岛、济南、南京、无锡、成都、广州、郑州、石家庄、沈阳、武汉、太原、长沙、厦门、韩国首尔、美国西雅图、荷兰等地余地设立了分支机构，形成遍布全国、辐射全球的市场营销与服务体系，是当今国内屈指可数的大型互联网企业。
生意宝公司曾先后承担“国家发改委化工行业电子商务应用工程”、“全国电子信息推广应用项目”‘“浙江省软件产业发展计划项目”，“浙江省经贸委推进流通企业电子商务进程项目”，“浙江省信息产业科技、新产品试制计划项目”“杭州市第一批高技术产业化项目”等一大批国家省市级重点项目。享受国家发改委电子商务专项资金，浙江省软件发展专项资金及浙江省信息服务业发展专项资金等，被浙江省科技厅认定为“浙江省高新技术企业”，被批准为“杭州高新技术产业开发区软件产业园企业”；通过“软件企业认证”；被杭州企业信用评级委员会评定为“AAA级企业”。
上市后，网盛生意宝团队开启了第二次创业。在过去的六年多时间里，公司团队依靠着自己的努力、智慧和毅力克服了一个又一个困难，基本完成公司新战略的布局既“电商、数据、金融三大战略。
联系我们
王经理
电话：024-83959235
E-mail:wy@netsun.com
长按识别二维码
微信公众号
