搜索
您的当前位置:首页正文

DIV+CSS背景一张整图(csssprites)

2023-11-27 来源:学路情感网

以前看到很多大型网站,整个网站的背景图片,是同一张图片,下载他的背景图片,看到一张图片上有很多小图标。

也就是国外很流行的css sprites,目前国内也有很多网站这样用。

这次在写CSS+DIV时,也这样写了个整站,感觉虽然做网站的整站慢,但在网站的占用资源上,的确省了不少。

原理,一般网站的图片都是分开的,每个图片的调用都会占用一个IIS链接,而现在把所有图片放在一张图上时,所有图片都是一个图片,只要调用一次图片,就可以提供整个网页的图片用,这样只占一个IIS链接。

在制作过程用,就是把所有的图片,都用背景来实现,比如一个小图标,就用这显示,把exp的样式设置一个背景,背景就是一个图片。

如:

 .exp{background-image: url(bg.gif);/*背景图片*/background-repeat: no-repeat;/*不平铺*/background-position: -300px -50px;/*设置背景图片在整个图的位置,在前面加个负号*/width=25px;/*宽度*/height=25px;/*高度*/}

看到上面的吧,在设置背景时,会指定背景在图片上的位置,然后控制宽度和高度的大小,这样就显示了一个图标了,同样的方法,把网站所有的界面图片都以这样的方法显示,每个图上都是取大图中的一小部分。

每个小图标在大图片中的位置,可以在PS里用线查看。

小编还为您整理了以下内容,可能对您也有帮助:

div+css如何用一张背景图实现全站背景图片调用 最好是能有个例子 谢谢啦

你的意思是不是一张图片可以用于整个网页的所有元素的背景设置。。。我想应该是一张png的图片。。然后每次用这张图片你要去找好背景在png图片上面的坐标然后利用background-position这个属性来进行设置背景图坐标追问恩 恩 是的 就是这个意思啦 但是这张背景上面的元素怎么摆放呢 是要事先测量好位置吗 然后用background-position定位吗 还是随意摆放 做页面的时候再去找位置呢

追答当然如果你知道位置的话。。你做网页的时候肯定会直接就把位置写好了。。。但是如果你不知道的话估计就得慢慢的调咯。。。其实位置就是左上角的坐标。。。只有你能精确的算出来也可以

。。你可以借助一些辅助的工具。。。比如说就拿截图工具来说他就能算出来。。。你自己慢慢琢磨吧

DIV+CSS,怎样将背景图片拉伸到全屏!! 谢谢各位了 急呀~~~

拉伸是可以做的,需要用到另外一个属性:
css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类:
1.是一整张大图,尺寸和区域大小刚好吻合
2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。
css3出现以后,可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox,chrome,以及ie9上都可以使用。
具体使用方法如下:
背景图尺寸(数值表示方式):
#background-size{ background-size:200px 100px; }
背景图尺寸(百分比表示方式):
#background-size{ background-size:30% 60%; }
背景图尺寸(等比扩展图片来填满元素,即cover值):
#background-size{background-size:cover; }
背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):
#background-size{ background-size:contain; }
背景图尺寸(以图片自身大小来填充元素,即auto值):
#background-size{ background-size:auto; }

DIV+CSS,怎样将背景图片拉伸到全屏!! 谢谢各位了 急呀~~~

拉伸是可以做的,需要用到另外一个属性:
css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类:
1.是一整张大图,尺寸和区域大小刚好吻合
2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。
css3出现以后,可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox,chrome,以及ie9上都可以使用。
具体使用方法如下:
背景图尺寸(数值表示方式):
#background-size{ background-size:200px 100px; }
背景图尺寸(百分比表示方式):
#background-size{ background-size:30% 60%; }
背景图尺寸(等比扩展图片来填满元素,即cover值):
#background-size{background-size:cover; }
背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):
#background-size{ background-size:contain; }
背景图尺寸(以图片自身大小来填充元素,即auto值):
#background-size{ background-size:auto; }

如何在div中插入一张背景图片?

1、在div里面书写了一些文字,然后想要在放入一张图片。

2、首先,我们应该先给div设置宽度和高度,保证文字有一个范围。

3、然后通过background给div添加一张图片作为它的背景。

4、通过url()来连接图片,url里面放置的就是背景图片的路径。

5、放一张图片用作背景,注意,路径要写对。

6、保存之后文字就会覆盖在图片的上面了,而如果使用img标签,则没有这种效果。

css中 div的背景图的问题

这个是CSS Sprites - CSS背景图片绝对定位!
就是通过定位来显示背景图片而以。把很多小的图片拼贴成一张。再通过背景定位的方法来显示,好处是减少了服务器请求次数,坏处是维护比较麻烦。 总体来说还是很值得使用的,现在流行这样做。
background:url(../images/ico.png) no-repeat -100px -1055px;
后面两组数字,-100px 代表从左往右的方向移动到100像素的地方开始显示图片
-1055px 代表从上往下的方向移动到1055像素的地方开始显示图片。 可以为负值,也可以为正值。两组数值 先左右,后上下。
(0,0,0,0,)这个是啥。我也不知道。。没见过。。 希望能帮到你。

css中 div的背景图的问题

这个是CSS Sprites - CSS背景图片绝对定位!
就是通过定位来显示背景图片而以。把很多小的图片拼贴成一张。再通过背景定位的方法来显示,好处是减少了服务器请求次数,坏处是维护比较麻烦。 总体来说还是很值得使用的,现在流行这样做。
background:url(../images/ico.png) no-repeat -100px -1055px;
后面两组数字,-100px 代表从左往右的方向移动到100像素的地方开始显示图片
-1055px 代表从上往下的方向移动到1055像素的地方开始显示图片。 可以为负值,也可以为正值。两组数值 先左右,后上下。
(0,0,0,0,)这个是啥。我也不知道。。没见过。。 希望能帮到你。

如何给div加图片?

html插入图片有两种方式:一种是通过<img>标签插入的正常的图片,另一种是通过css样式插入的背景图片。

问题分析:

1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。

2、如果你插入的图片是通过<img>标签的方式来插入的话,可以通过<img>自身的属性控制图片大小,代码格式是:<img src="图片路径" width="图片宽度" height="图片高度"/>。

3、如果非要通过css控制背景图片的大小,可以通过background-size样式来实现,具体的css格式是:background-size:宽度 高度; (如下图所示)。

扩展资料:

1、background 是用于在一个声明中设置所有背景属性的一个简写属性。

格式: background: {属性值}

继承性: NO;

可能的值:

background-color(背景颜色)

background-image(背景图片)

background-repeat(背景拉伸方式)

background-attachment(固定或者随着页面的其余部分滚动)

background-position(背景定位)

新增的值:

background-clip(规定背景的绘制区域)

background-origin(相对于容器中来定位背景图像)

background-size (背景图像的大小)

参考资料:

百度百科-background

css如何使div背景图片填充

css使div背景图片填充的具体操作步骤如下:

1、我们首先打开前端开发工具,新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签,然后给这个标签添加上class = "bg-img"。

3、设置背景图片,创建style标签,然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码,使用浏览器打开,这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面,在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器,这个时候会发现浏览器上的背景图片已经自动居中了。

学路情感网还为您提供以下相关内容希望对您有帮助:

div+css布局背景在一张大图上

这是国外比较流行的技术,名叫"css sprites",这样把很多小图放在大图里可以节省下载时间,减少图片大小(全放在一个大图上,比分散成N个小图大小总和要小很多).下面是一些css sprites的技术介绍,你可以看看.http://www.blueid...

div+css如何用一张背景图实现全站背景图片调用 最好是能有个例子 谢谢...

你的意思是不是一张图片可以用于整个网页的所有元素的背景设置。。。我想应该是一张png的图片。。然后每次用这张图片你要去找好背景在png图片上面的坐标然后利用background-position这个属性来进行设置背景图坐标 ...

什么是 CSS sprites?

【答案】:CSS Sprites 其实就 是把 网页中 一些 背景图 片整 合到一 张图 片文件 中, 再利用 CSS 的 "background-image" , "background-repeat" , "background-position" 的 组 合进行背景定 位 , backgrou...

html中如何加入背景图片

第一种: 在css文件里加入背景图片:在css里用url(../images/背景图2.jpg),在内联css和引入css中会由于html文件和css文件所处的相对位置不同,引入图片路径会有所不同。如图:第二种:在html中引入:&lt;div class="det...

DIV+CSS,怎样将背景图片拉伸到全屏!! 谢谢各位了 急呀~~~

1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。css3出现以后,可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox,chrome,以及ie9上都可以...

css如何让背景图全屏显示css如何让背景图全屏显示出来

您好!css设置背景图片全屏,如果只是将其当做一张图片显示,可以通过css控制。超大图片,引入进来即可根据大小缩放。如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用,实现背景拉伸铺满...

html如何将图片做背景html如何将图片做背景透明

在html中给div添加背景图片主要有以下几种方法:第一个:给css文件添加背景图片:使用url(../images/背景图片2.jpg)在css中,由于html文件和css文件的相对位置不同,内联css和导入css中引入图片的路径会有所不同。如图所示:...

精灵图的核心原理是什么?

因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。使用精灵图...

divcss用图片当背景的代码

background: #ff000 url(XXXX) no-repeat center center;(背景颜色 背景图片路径 图片呈现方式 x轴上位置 y轴上位置)

css中 div的背景图的问题

这个是CSS Sprites - CSS背景图片绝对定位!就是通过定位来显示背景图片而以。把很多小的图片拼贴成一张。再通过背景定位的方法来显示,好处是减少了服务器请求次数,坏处是维护比较麻烦。 总体来说还是很值得使用的,现在...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 次韵钱申伯山堂之咏的朝代是什么

    《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏的朝代

    《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏朝代

    《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏的作者 次韵钱申伯山堂之咏的作者是什么]

    《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

  • 次韵钱申伯山堂之咏的作者是什么

    《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

Top