如何用CSS实现大背景网页设计
发布人:一全科技 来源:飞鱼的声纳 发布于:2010-12-24 22:49:37 浏览:1021

辽宁12选5走势图表 www.jc1o.cn 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计。因此我决定和大家分享大背景网站的设计技巧。在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计。

经?;岱傅拇砦螅罕尘氨徊眉酰ú榭?a target="_blank">示例)

查看示例文件,在小于1280分辨率时,是没有问题的。但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分。

background-cuts-off

实例1:一张图片(查看示例

简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色。这里我用Web Designer Wall作例子,看下面的图片,注意图片的边缘是纯色的。

image

CSS部分

这部分很简单,为body元素设置背景图像(定位于center,top)

image

以下是css代码:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
  width: 100%;
  display: table;
}

注意观察在body选择符内有两条额外的线条,这样是为了防止当浏览器窗口比内容宽度小时,背景图片的改变。(这在firefox会出现)

image 
 

实例2:两张图片(查看示例

我将会用到Design Jobs on the Wall做例子,我给body标签应用了重复的软木板的图案,然后给wrapper标签应用了居中的背景图案。

image

这里的诀窍在于给Gif图像使用了和软木背景相似的但却更深的颜色。

image

实例3:天空背景(查看示例

在这个例子中,我给body标签应用了1个像素的水平方向重复的渐变。然后我给wrapper标签加上了一张居中的云朵背景图片。

image

更新:给html选择符应用天空背景图片(查看示例

感谢读者的评论,以下是给html选择符应用了渐变背景,因此wrapper标签就不再需要了,这是更为简洁的一个方法。

image

原文链接:How to: CSS Large Background

  • 为什么说一直辛苦劳作的农民没有富起来?而不说一直勤劳的农民没有富起来? 2019-06-15
  • 刘红:关注乳腺健康 做好体检预防工作 2019-06-11
  • 中国伊斯兰教协会“四进”清真寺活动启动 2019-06-05
  • 我国社会组织正成为全球治理体系中的新生力量 2019-06-05
  • 林肯全新Navigator领航员正式上市 售112.80万元起 2019-05-27
  • “川商走进新经济”第一场活动落幕 2019-05-14
  • 还加上制裁伊朗引起价格飙升的石油战 2019-05-14
  • 青海:52个客运站卫生间将全面改造 2019-05-12
  • 依规治党和依法治国结合的典范 2019-05-12
  • 内蒙古水利厅厅长付万惠接受纪律审查和监察调查 2019-05-11
  • 传销就是利用这种劣根性。 2019-05-08
  • 女性之声——全国妇联 2019-04-22
  • 不忘初心继续前进——七集政论专题片 2019-04-21
  • 百姓故事:摔跤吧!女孩 2019-04-16
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-04-16
  • 网球王子立海大图片 体彩11选5玩法 排球比分显示 最牛平特肖 自选号技巧 下载贵州快3开奖结果 11选5上海时时彩平台 排列5开奖直播视频 天狼星彩票软件 歌舞娱乐场所包括 有极速快3的网站平台 意甲积分榜20192019 湖北快三今日必出 四川时时彩是真的吗 浙江十一选五开奖一定