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}
技巧是将大背景图片的颜色设置为何背景小图片的颜色相似。
一、内部引用:运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。具体css代码写到<style></style>中,如下面的例子<style>
bdoy{font-size:14px}
</style>
二、外部引用:用<link>标签引用外部CSS文件中的样式。可将CSS做成单独文件。比如css写到style.css文件中,然后在html中应用这个css。一般最常用的这种方法。
<link rel="stylesheet" type="text/css" href="style.css">
三、在代码中使用:<div style="color:red"></div>
1、直接在标签里写入对这个标签的css控制。2、头部直接写入css。
3、外部链接一个css文件。
4、当接入多个css时,一个css文件引用另一个css文件。