css背景样式实例,css样式框架
CSS样式表控制背景图片大小
可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size:950px* 200px这表示把背景图片大小调整为宽度950像素，高度200像素。
成都创新互联公司专注于化德企业网站建设,成都响应式网站建设,商城建设。化德网站建设公司,为化德等地区提供建站服务。全流程按需网站开发，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务
1、background-size的语法说明：
(1)属性名:background-size
(2)属性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain
(3)初始值:auto auto
(4)应用于:所有元素
(5)继承性:无
(6)百分比:后面会说明
(7)计算值:根据指定
2、代码说明：
/* 一个值: 这个值指定图片宽度，第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但必须用逗号隔开。 */
background-size: auto, auto /* 请区别于background-size: auto auto*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
扩展资料：
背景重复：
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
背景图像将从一个元素的左上角开始。如下：
body
{
background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;
}
背景定位：
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center;
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
参考资料来源：w3school：CSS 背景
css背景图片代码
1、首先在电脑端找到Dw软件，进行打开操作，然后新建一个html文件。
2、新建文件完成之后，写入一个div代码操作，如图所示。
3、写入div代码之后，引入一个css样式，如图代码操作所示。
4、引入样式代码之后，打开引入的css.文件，如图所示。
5、在新引入的css文件中，写入css背景图片代码即可，如图所示。
[img]css样式实现整个页面背景使用一张图片
例子
background-image: url(1.jpg);
width: 16px;
height: 16px;
background-position: -976px -480px;
1、指定背景图片
2、指定宽度和高度
3、指定需要图片的左上顶点
这样你整个网页需要的图标啊，背景啊什么东西都可以集成在一张图片里了
HTML CSS 背景样式！
这个专业上讲叫css sprite
第一个，8px -16px 表示以原图片左上角为准，在水平方向上向左8px 开始显示，也就是有8px的透明，而在垂直方向上，是以原图最上沿开始往下16px开始显示。
第二个， right 13px; 是指在水平上，以该元素的右边框为准，与原图片的右边对齐，然后以原图上沿为准上方13px开始显示，也就是有13px的背影透明。
这样的话，第一次加载该网页的速度不一定会变快，但是刷新、跳其它页等的时候，速度会因为浏览器缓存的关系，明显加快，同时，对IIS连接数，也有明显的优化效果。
空间是会减少的，因为越是零散的文件，所浪费的空间也就会越多，这与计算机文件存储知识有关了，不具体介绍。
同时，对服务器的资源占用会有一定效果的优化，这与计算机磁盘读取知识有关，计算机在硬盘中读取同样大小的两种数据，一种是零散的多文件，一种是整文件，占用空间相同的情况下，当然是整文件速度快，占用数据存取资源最小。
另外，还有一种好处，就是便于文件的管理，一个网站里有数百张背影图片好管理呢，还是只有寥寥几张好管理呢？
css背景样式怎么设置
div{
background: #fff000;
font-size: 30px;
border:10px dashed #0000ff;
padding:20px;
background-image: url("../../image/icon.png");
background-repeat:no-repeat;
}
.div2{
margin-top:30px;
background-origin: content-box;
background-clip: content-box;
}
background-clip:规定背景的绘制区域
background-origin:相对于内容框来定位背景图像
background-image：背景图片
background-repeat:背景图片师傅平铺重复
background-size：图片大小，适应独，属性值有cover，百分比，等
分享文章：css背景样式实例,css样式框架
分享地址：http://pwwzsj.com/article/dsopjoe.html
