css3-3 css3背景样式

一、总结

一句话总结：网站页面上的小图标集成在一张大图上面，是因为降低服务器负载，网站上的那些图片都可以下载下来，源码那里，或者工具那里。

1、background:#ccc url('xs.png') no-repeat fixed 50% 50%;中的最后两个参数是什么意思？

背景图片的偏移位置，表示距上和距左各百分之五十

2、为什么各种网站设置的时候把所有的小图标集成在一张图上面？

降低服务器请求次数，降低负载，当然这样也会导致必须下载了这张图页面才能正常显示。

3、各种网站设置的时候把所有的小图标集成在一张图上面，怎么访问单一的图？

百度：背景，然后偏移

4、百度页面将css和js写在页面内部而不是外部的原因？

降低服务器请求次数，降低负载

5、background缩写的各个参数是什么意思？

12             background:#ccc url('xs.png') no-repeat fixed 50% 50%;

二、css3背景样式

1、相关资料

背景:
1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position

2、代码

background缩写形式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family:微软雅黑;
 9         }
10
11         body{
12             background:#ccc url('xs.png') no-repeat fixed 50% 50%;
13         }
14     </style>
15 </head>
16 <body>
17     <div>
18         <h1>linux is very much!linux is very much!</h1>
19         <h1>linux is very much!linux is very much!</h1>
20         <h1>linux is very much!linux is very much!</h1>
21         <h1>linux is very much!linux is very much!</h1>
22         <h1>linux is very much!linux is very much!</h1>
23         <h1>linux is very much!linux is very much!</h1>
24         <h1>linux is very much!linux is very much!</h1>
25         <h1>linux is very much!linux is very much!</h1>
26         <h1>linux is very much!linux is very much!</h1>
27         <h1>linux is very much!linux is very much!</h1>
28         <h1>linux is very much!linux is very much!</h1>
29         <h1>linux is very much!linux is very much!</h1>
30         <h1>linux is very much!linux is very much!</h1>
31         <h1>linux is very much!linux is very much!</h1>
32         <h1>linux is very much!linux is very much!</h1>
33     </div>
34 </body>
35 </html>

0 Links

转载于:https://www.cnblogs.com/Renyi-Fan/p/9211631.html

css3-3 css3背景样式相关推荐

【CSS3】设置背景样式
背景样式背景颜色背景图像背景图像引入背景重复方式背景定位背景尺寸属性说明示例 background 在一个声明中设置所有背景属性(背景尺寸除外) background: tomato ...
educoder实训平台----CSS3背景样式
educoder实训平台----CSS3背景样式第1关:CSS背景相关的概念 DACAD 第2关:CSS-背景色的设置 <!DOCTYPE html> <html> < ...
第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞图书编号: 9787302261834 图书格式: PDF 出版社: 清华大学出版社出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
html气泡聊天样式,css3的聊天气泡样式
这次给大家带来css3的聊天气泡样式,做出css3的聊天气泡样式的注意事项有哪些,下面就是实战案例,一起来看一下. 在聊天的场景中,聊天内容需要用到气泡修饰,如下图.下面一一讲解. 图片式: 第一个样 ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效，飘花效果的实现——效果图： - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效飘花效果的实现--效果图: 查看演示源码下载需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...
html背景纹理,如何用css3制作纹理背景
如何用css3制作纹理背景看到题目大家也许会想,这是什么意思,一直想系统一下自己的css3的知识,才发现自己对css3的掌握程度简直不敢直视,很多地方都差了好多,暂且一点点来学吧! 记得有一天在微博 ...
html中背景条纹效果,纯css3实现条纹背景方法（水平，垂直，倾斜）
以上这些并不是背景图,而是由CSS样式代码实现.在现代标准浏览器中,我们通过CSS3的两个属性,一个是linear-gradient,即线性渐变,另一个是background-size,用来确定渐变的 ...

css3-3 css3背景样式

css3-3 css3背景样式

一、总结

一句话总结：网站页面上的小图标集成在一张大图上面，是因为降低服务器负载，网站上的那些图片都可以下载下来，源码那里，或者工具那里。

1、background:#ccc url('xs.png') no-repeat fixed 50% 50%;中的最后两个参数是什么意思？

2、为什么各种网站设置的时候把所有的小图标集成在一张图上面？

3、各种网站设置的时候把所有的小图标集成在一张图上面，怎么访问单一的图？

4、百度页面将css和js写在页面内部而不是外部的原因？

5、background缩写的各个参数是什么意思？

二、css3背景样式

1、相关资料

2、代码

css3-3 css3背景样式相关推荐

最新文章

热门文章