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缩写形式

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family:微软雅黑;

         }

         body{

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

         }

     </style>

 </head>

 <body>

     <div>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

         <h1>linux is very much!linux is very much!</h1>

     </div>

 </body>

 </html>
 
0 Links

 

css3-3 css3背景样式的更多相关文章

  1. CSS3初学篇章_5（背景样式/列表样式/过渡动画）

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  2. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  3. CSS3文字、背景与列表

    一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...

  4. 第95天：CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  5. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

  6. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  7. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  8. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  9. CSS3全新的背景图片方案

    CSS3全新的背景图片方案 firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID), webkit系支持-webkit-canvas(xxxx)动态创建一个ca ...

随机推荐

  1. sql跳过非工作日（周末和节假日）

    简介:场景1:基于开始日期和工期,推算结束日期. 场景2:基于开始日期和结束日期,计算工期 注:需要自己做界面维护工作日表(s_WorkDay)和节假日表(s_SpecialDay) 涉及到的数据表 ...

  2. 如果把父组件的数据实时的传递到子组件：用watch

    1.在子组件使用watch来监听传递给子组件的数据,然后更新子组件的数据. 2.watch和computed结合使用效果非常好. 参考链接:https://blog.csdn.net/zhouweix ...

  3. Android 使用Wake Lock

    为了延长电池的使用寿命,Android设备会在一段时间后使屏幕变暗,然后关闭屏幕显示,最后停止CPU.WakeLock是一个电源管理系统服务功能,应用程序可以使用它来控制设备的电源状态. WakeLo ...

  4. spring-data-redis 使用

    以前使用过Jedis,后面因项目需要使用spring-data-redis,设置一个键值及其过期时间后怎么都不对. 源代码: redisTemplate.opsForValue().set(key, ...

  5. Android 基于Http的多线程下载的实现

    a.对于网络上的一个资源,首先发送一个请求,从返回的Content-Length中回去需要下载文件的大小,然后根据文件大小创建一个文件. this.fileSize = conn.getContent ...

  6. programming+windows+MFC

    1)CMyApp declares no data members 2)CWinApp::InitInstance run after application build but before the ...

  7. 【Codeforces Round #432 (Div. 1) A】 Five Dimensional Points

    [链接]点击打开链接 [题意] 给你n个5维的点. 然后让你以其中的某一个点作为起点a. 另选两个点b,c. 组成向量a->b,a->c 如果所有的a->b和a->c的夹角都是 ...

  8. 注意knn与kmeans的区别

    开始的时候,我居然弄混了. knn是分类方法,是通过新加入的节点最接近的N个节点的属性,来判定新的节点. kmeans是聚类方法,是先选择k个点作为k个簇的中点,然后分簇之后重新划定中心点,然后再分簇 ...

  9. μC/OS中的任务就绪表

    为了便于对就绪表的查找,μC/OSII又定义了一个数据类型为INT8U的变量OSRdyGrp, 并使该变量的每一位都对应OSRdyTbl[ ]的一个任务组(即数组的一个元素),如果某任务组中 有任务就 ...

  10. Flask项目之手机端租房网站的实战开发（一）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶项目介绍 产品:关于手机移动端的租房网站 角色:在这个产品中用户包括房东与房客 功能:房东可以在这个平台发布自己的房屋,房客可 ...