怎样用CSS实现大背景网页效果

   在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片。例如:在小于1024*768分辨率时,是没有问题的。但是假如你的显示器的分辨率大于1024*768,你会看到背景图片以外的部分,影响效果。如下图:


  如何用CSS实现大背景的网页效果呢,下面来看一些实例:

  例1:图片+背景颜色

  将图片边沿的颜色设置成和网页背景色相同的颜色。看下面的图片,留意图片的边沿是纯色的。


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

  以下是css代码:

  CSS Code复制内容到剪贴板

  代码如下:

  body {

  padding: 0;

  margin: 0;

  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

  width: 100%;

  display: table;

  }

  例2:两张图片

  给body标签应用了重复的软木板的图案,然后给wrapper标签应用了居中的背景图案。


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

时间: 2025-01-30 00:10:43

怎样用CSS实现大背景网页效果的相关文章

如何用CSS实现大背景网页设计

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色.这里我用Web Des

利用CSS滤镜让网页效果更有风格

在进行网站设计的时候,很多的效果并不用在photoshop里进行设计!中国WebSite网认为完全可以在网页里可以用javascript来实现也可以用css滤镜便可以方便的设计出来! 语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername为滤镜的名称,fparameter1.fparameter2等是滤镜的参数) 滤镜说明: alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 chrom

CSS网页设计实例:设计制作大背景网页

网页制作Webjx文章简介:如何用CSS实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

纯CSS实现多级半透明效果菜单代码

 本文实例讲述了纯CSS实现多级半透明效果菜单代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的多级半透明菜单,最多可支持5级的CSS菜单,菜单样式可自己调整,默认先是这种,兼容多种浏览器. 运行效果截图如下:   具体代码如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt

求代码 我想做一个网页效果,如下图。这个应该是用JS做的

问题描述 求代码 我想做一个网页效果,如下图.这个应该是用JS做的 就是那个 上标"新" 还有"9折"的那个 解决方案 所以用F12,它可以直接告诉你在哪个文件中. 解决方案二: 用层就可以实现,用IE F12看下css

《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性

6.6 单元格属性 HTML.CSS.JavaScript 网页制作从入门到精通 单元格是表格中最基本的单位.< td >单元格全部包含在行< tr >中,一个行里面可以有任意多个单元格.可以自定义设置单元格的各项属性,这些样式将覆盖< table >和< tr >已经定义的样式. 6.6.1 单元格大小width.height 默认情况下,单元格的宽度和高度会根据内容自动调整,也可以通过width.height设置单元格的宽度和高度. 语法: 说明: 单元

《HTML、CSS、JavaScript 网页制作从入门到精通》——第1章 HTML基础1.1 HTML的基本概念

第1章 HTML基础 HTML.CSS.JavaScript 网页制作从入门到精通 在当今社会中,网络已成为人们生活的一部分,网页设计技术已成为学习计算机的重要内容之一.目前大部分网页都采用可视化网页编辑软件来制作的,但是无论采用哪一种网页编辑软件,最后都是将所设计的网页转化为HTML.HTML是搭建网页的基础语言,如果不了解HTML,就不能灵活地实现想要的网页效果.本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法,使读者对HTML有个初步的了解,从而为后面的学习打下基础. 学

css实现气泡框效果(实例加图解)_CSS/HTML

前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等.下面我们来学习下使用html+css来实现这种效果! 如下效果:    and   我们可以来分析下:要实现这种效果 无外乎就是一个矩形和一个小三角形 然后三角形定位上去就可以了,那么我们怎么样通过css来制作小三角形呢? 一:首先我们来看看css border属性,