css3-3 css3背景样式
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>
css3-3 css3背景样式的更多相关文章
- CSS3初学篇章_5（背景样式/列表样式/过渡动画）
背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS3文字、背景与列表
一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...
- 第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- CSS3全新的背景图片方案
CSS3全新的背景图片方案 firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID), webkit系支持-webkit-canvas(xxxx)动态创建一个ca ...
随机推荐
- js ---- 实现千位分隔符
第一种方法: var num = 1234567; var string = num.toString(); var arr = string.split('').reverse(); console ...
- 深入了解Linux远程桌面
本文转载于:http://www.linux521.com/2009/system/201004/11001.html 已发表在<网管员世界>2010年3月杂志 本 ...
- Codefroces 832B Petya and Exam
B. Petya and Exam time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- POJ 2427 Smith's Problem Pell方程
题目链接 : http://poj.org/problem?id=2427 PELL方程几个学习的网址: http://mathworld.wolfram.com/PellEquation.html ...
- 通俗理解vuex原理---通过vue例子类比
本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...
- log4j.properties配置与加载应用
log4j.properties总结: 一.介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器 ...
- 洛谷——P1073 最优贸易 （[NOIP2009] ）
https://www.luogu.org/problem/show?pid=1073 题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多 ...
- android开发者要懂得问题答案
我在网上看了一下有些人在博客上提出一些什么android开发者必须懂得问题,可是就是没有答案,所以我就把这些问题拷贝过来了.顺便也把全部的答案加上,为了让很多其它的开发者高速的找到答案,谢谢! 以下的 ...
- Android控件：RadioButton(单选button)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- 移动mm 话费支付接入过程（ane）
下面记录移动mm 话费支付接入的过程 1.强联网.弱联网差别.sdk是否有区分?用户体验部分由什么不同和差异? 差别在于强联网是网络通道(wifi/gprs/3g),弱联网是走短信通道,用户层面差异在 ...