您现在的位置是：网站首页> 编程资料编程资料
css样式实现整个页面背景使用一张图片_CSS教程_CSS_网页制作_
2021-09-08
910人已围观
简介 最近一直被css背景困扰，因为是仿站，别人网站背景图片无论怎样另存，都是相同文件名，打开一看，整个网站的各个角落背景图片都在一个文件中分布，于是上网搜集资料，发现使用这种方法的网站很多，源自于雅虎最早。
这样实现的好处很多，网页加载一个背景图片大大加快了网站浏览速度，也非常便于网站整体风格修改。
难度在于制作的背景图片如何截取指定的位置作为某个地方的背景，仔细研究发现还是不难的，首先windows自带的画图软件就可以实现查找坐标，因为css背景是通过坐标来截取位置，还有Photoshop也可以实现，如下图：
background-position: 0px -50px的意思是水平位置为0px，垂直位置为50px。
难度在于制作的背景图片如何截取指定的位置作为某个地方的背景，仔细研究发现还是不难的，首先windows自带的画图软件就可以实现查找坐标，因为css背景是通过坐标来截取位置，还有Photoshop也可以实现，如下图：
css样式代码如下
复制代码
代码如下:background-position: 0px -50px的意思是水平位置为0px，垂直位置为50px。
相关内容
- display:inline的用法 _CSS教程_CSS_网页制作_
- div完美自适应动态上下左右居中 _CSS教程_CSS_网页制作_
- 固定位置显示弹出层(兼容IE6,IE8,FF)_浏览器兼容教程_CSS_网页制作_
- CSS多浏览器兼容性(IE和Firefox)技巧大全推荐 _浏览器兼容教程_CSS_网页制作_
- 具有Float属性的元素依然居中 _CSS教程_CSS_网页制作_
- CSS 层叠样式表命名参考表_CSS教程_CSS_网页制作_
- IE与Firefox中CSS兼容性技巧大全 _浏览器兼容教程_CSS_网页制作_
- 浮动后的li元素居中实现方法_CSS教程_CSS_网页制作_
- CSS 网页布局排版实例_CSS布局实例_CSS_网页制作_
- css之自动换行实现代码_CSS教程_CSS_网页制作_
