首页 >>  正文

css+sprites

来源:baiyundou.net   日期:2024-09-20

 在建网站的过程当中使用背景图片似乎是绕不过去的一个环节,背景图的使用能更好的衬托出想要表达的内容,也可以让局部细节达到最完美的状态,合理使用背景能够让视觉感官有一个更加的舒服体验,专业设计师会让背景用的恰到好处,没有目的的使用往往会适得其反,不仅达不到想要表现的效果,反而还会喧宾夺主影响主体内容的表现。

  建网站时对于图片的颜色也有一定的选择技巧,郑州建企业网站时可以选择和主页面相溶合的颜色,以达到视觉平滑,分享几点背景图片的使用方法


  第一种用法:幻灯图或大banner图

  一个当下的网站往往离不开大尺寸的幻灯图片或banner大图,大图组合创意和文字给人带来的视觉效果是相当震撼的,再加上一般会显示在网页的第一屏重要程度不用言语,使用方式一般做背景来用,宽度1920px高度不超过700px,只要是新做的网站都会有这个模块。


  第二种用法:页面中间固定模式

  在这种使用方式下,大图片一般会以全屏尺寸来设计,如1920X900px的尺寸,平铺不重复做为网页某一块的背景,同时设置图片展现行为fixed固定不动,当用户拉动网页下拉滚动条的时候会造成页面内容在往上移动而背景固定不动的视频效果。


  第三种用法:小范围频道背景

  往往使用于网页小块的频道头或分类标题下,可以是纯颜色,如果想要达到很好的视觉效果就只能使用图片,做为背景图片时颜色往往较重,而上面的文字一般用亮色,用一个重的背景来衬托文字,视觉效果相当不错。


  第四种用法:局部动态效果展示

  在这种展示效果中用到的背景图片往往是以PNG图片为主的透明素材,用DIV+CSS写好布局再加CSS3的动画特效,能给人非常强烈的视觉体验,CSS3动画效果的强大也是FLASH没落的一个重要原因。


  第五种用法:网页精灵图(css sprites)

  所谓网页精灵图Sprites即使用一张大图把整个或部分网页用到的小图都全部集中到一张图片上,然后在网页使用时再通过各个小图的坐标位置来分别调用,使用负值来调用分别对应的图片位置。

","gnid":"977b6b442879a508d","img_data":[{"flag":2,"img":[{"desc":"","height":"520","title":"","url":"https://p0.ssl.img.360kuai.com/t01a55becd77b3a8b06.jpg","width":"850"}]}],"original":0,"pat":"art_src_0,fts0,sts0","powerby":"pika","pub_time":1706106040000,"pure":"","rawurl":"http://zm.news.so.com/f8a3cb2cb0b9d9725a6c5548b811c16a","redirect":0,"rptid":"c77f4b64f969205d","rss_ext":[],"s":"t","src":"三七一网络","tag":[],"title":"在建网站的中常见的五种背景图片的使用方法

项胡废3128请教 Flash 中如何使用 CSS Sprites 技术?
臧肥琦18689222162 ______ Flash 中如何使用 CSS Sprites 技术? 没听说过.......CSS Sprites技术是一种网页图片应用处理方式.减少服务器的请求次数,加快网页下载速度,它允许你将一个页面涉及到的所有的图片都包含到一张大图中去,这样,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的

项胡废3128CSS sprites 的样式生成工具哪里有 -
臧肥琦18689222162 ______ CSS Sprites 样式生成工具有使用RIA开发一个针对CSS Sprites 的样式生成工具,小巧,实用,可惜部分功能使用起来还不是很灵活, CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐,还要书写出css;实用这个工具就能在很大程度改善这个问题; CSS sprites 在线生成工具就有好多 csssprites.com, Sprite Cow, Sprits Pad都是不错的选择 当然专业的设计师喜欢用Photoshop

项胡废3128CSS Sprites 图片整合技术 -
臧肥琦18689222162 ______ <p>你不把代码放出来一时也判断不出是什么问题</p> <p>按下面这个方法的话应该是没问题的</p> li{background-image:url(ico.gif); background-repeat:no-repeat; float:left; width:100px; padding-left:20px;} li.link1{background-position:0px 0px;} li....

项胡废3128css 网上的图标为什么用开发者工具打开链接是一整张图片呢? -
臧肥琦18689222162 ______ 这是一种常用的技术:CSS Sprites 原理:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置.这种方式可以减少http请求,提高页面的加载速度.

项胡废3128网页美工的一个问题?有关于背景、边框和按钮的 -
臧肥琦18689222162 ______ 标准答案:使用了css sprite技术以下为百度百科拷贝内容,我就不自己一句一句的说了,还是它这个全面些.你自己看一下,具体哪不明白再问我=css spr...

项胡废3128CSS Sprites技术 为何会选用PNG透明图片作背景? -
臧肥琦18689222162 ______ CSS Sprites图片切割术 1、CSS Sprites图片顺序合图片由上至下、左至右添加.而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦. 2、不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增...

项胡废3128vwd提供了哪些使用css的便利工具 -
臧肥琦18689222162 ______ 1. dabblet 一个交互式的CSS开发和代码共享工具.该工具托管于Github站点,提供了很多便利的CSS编辑功能. 2. Sprite Cow Sprite Cow是一个新的CSS Sprite(CSS精灵,是一种网页图...

项胡废3128[已解决] 提到 CSS Sprites问题.背景图怎么样定位? -
臧肥琦18689222162 ______ 呵呵,我回你个吧!将代码加入body{} 样式中即可!PADDING-RIGHT: 0px; BACKGROUND-POSITION: center 50%; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; PADDING-TOP: 0px; FONT-FAMILY: Arial, "宋体";background:url(/images/bg.png) repeat-x top;background-color:#fff;此效果图片会居中靠上显示,自己下吧.

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024