css中如何调整插入背景图片的大小

html-css016

css中如何调整插入背景图片的大小,第1张

CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

由于我发表了

80 Large Background Websites

普遍的错误:被裁切的背景(Demo)看一下示例文件,在1280px的分辨率下看起来是好的,但是如果转换到更高的分辨率下,你将看到类似于裁切边缘的效果。

示例#1:单图片(Demo)一种简易的方法修补刚才的问题:让图片边缘的颜色和BODY标签的背景颜色一样。我使用Web Designer Wall的背景作为例子。查看背景图片

,注意图片的边缘是不是固定的同一种颜色?CSS部分CSS代码就很简单。就是定义BODY的背景图片了(position:center,top)。

这是CSS代码:body {padding: 0margin: 0background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top

width: 100%

display: table}

注意有两行额外的代码。那是为了在改变浏览器大小浏览器宽度小于内容大小的时候防止背景移动(firefox中会出现这个bug)。

示例#2:两张图片式(Demo)这是我用在job board板块设计里的

Design Jobs on the Wall

。BODY用一张小的木质纹理图片重复,然后将大图片放在外包div wrapper的top center。body {padding: 0margin: 0background: #d39c5c url(images/cork-bg.png)

color: #333333}#wrapper {background: url(images/corkboard-top-bg.png) no-repeat center top

width: 100%

display: table}#content {width: 916px

margin: 159px auto 0

background: #fff

border: solid 1px #ccc

padding: 20px}h1 {margin: 0padding: 0}

技巧是将大背景图片的颜色设置为何背景小图片的颜色相似。