实例说明CSS中图片实现大背景网站设计技巧

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

经常会犯的错误:背景被裁减(查看示例)

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

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

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

CSS部分

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

以下是css代码:

以下为引用的内容:

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

时间: 2024-09-24 05:20:40

实例说明CSS中图片实现大背景网站设计技巧的相关文章

PHP批量下载html与css中图片文件实例

最近一直很忙,遇到一个手工活,需要下载一些远程的图片,一共一百多张,如果通过手工一张一张的保存,也太耗费时间了,于是上网google了一把,找到PHP批量下载图片文件的方法,原文是出自平凡世界博客的一片关于如何使用PHP批量下载CSS文件中的图片的文章.经过研究改写了一下就可以使用了,方便快捷多了. PHP批量下载图片文件代码:  代码如下 复制代码 set_time_limit(0);//设置PHP超时时间 $imagesURLArray = array_unique($imagesURLAr

PHP file_put_contents()实现批量下载图片文件和css中图片代码

 代码如下 复制代码 set_time_limit(0);//设置PHP超时时间 $imagesURLArray = array_unique($imagesURLArray );   foreach($imagesURLArray as $imagesURL) {     echo $imagesURL;     echo "<br/>";     file_put_contents(basename($imagesURL), file_get_contents($ima

40+ 新鲜漂亮的大背景网站设计

使用大型背景图或插图作为装饰,能够在视觉上增强吸引力.越来越多的用户拥有了高分辨率显示器和高速网络环境,许多网站设计者也开始采用大背景图.这篇文章关于 40+ 新鲜漂亮的大背景网站设计,令人耳目一新. 1. The Pixel Blog 2. Copimaj Interactive 3. Flourish Web Design 4. Abduction Lamp 5. Morphix Design Studio 6. Final Phase 7. Make Photoshop Faster 8.

从“甄嬛传”中看到的推广网站的技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近一直在看一部电视剧,那就是"甄嬛传",经过几天的奋斗终于看完了这部电视剧,也一直很佩服甄嬛的表现,在后宫中,为了争宠,每个人都争的头皮血流,但是却又不会放弃,可能这就是他们的悲哀吧,看完了整部电视剧,突然之间想到和网络营销联系在一起,其实在网络营销中,我们往往所看到的也是千站争宠,获得排名的竞争,每一位网站现在都在为了

Ajax清除浏览器js、css、图片缓存的方法_javascript技巧

做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. 第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的 后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个 方法,就是利用BufferedImage这个类. 开始 首先说说我的思路,就是把本地的图片,加载到内存

版面设计中的一图多用设计技巧

设计技巧:如何在设计中一图多用 [译者的话] 在版面设计中,你有很多地方都需要用到图片,但你手上只有一张图片,怎么办?在本文中,我们用两个实例来说明如何解决这个问题,我们只用一张图片,通过分解剪切,就可以将这张图片用在不同的地方,出来的效果非常漂亮.一张图片,其实已经足够! 原文出处:www.bamagazine.com 在本文中,我们要将你买回来的图片物尽其用:通过从原图中得到几个小图,完全可以配合你的版面设计. 这是我们要利用的原图 在版面设计中,就变成这样 你有注意到其实在大图中隐藏着一些

网站设计技巧:网页元素设计和网页转场设计

文章描述:浅谈网页元素与页面的转场设计. 在电视作品中,段落与段落.场景与场景之间的过渡或转换,叫做转场.为了使电视片内容的条理性更强.层次的发展更清晰.在场面与场面之间的转换中,需要一定的手法. 网站也是类似的,一个完整的网站由若干页面组成,而每个页面又由若干元素组成.为了使网站内容的条理性更强.操作逻辑更清晰.用户体验更好.用户转化率更高,在不同元素与页面的转换中,也需要一定的技巧. 过渡效果 a 渐入渐出 这种方式非常常见:比如在酷狗音乐盒中关闭音乐后,声音在几秒钟内逐渐停止,而不是马上消

网站设计技巧:质感的网页导航设计

网页制作Webjx文章简介:一直都有朋友在问质感方面的问题,很多朋友也一直希望记忆能做一期质感方面的教程,但是由于一直很忙,所以到今天才简单为大家带来一期质感方面的教程! 一直都有朋友在问质感方面的问题,很多朋友也一直希望记忆能做一期质感方面的教程,但是由于一直很忙,所以到今天才简单为大家带来一期质感方面的教程! 首先来看一个标准的导航质感如何展现吧! 导航在网站设计中占有举足轻重的地位,导航是整个站点中(特别是门户站)视觉的焦点和中心,其影响力仅次于Banner!导航的成败直接影响了整个站点的

10个专题页面的网站设计技巧

  单页最早出现在平面设计中,设计师通过用不同尺寸.材质的纸张,在仅有的正面和反面上进行自由设计的过程,主要用在折页.宣传单.海报中. 电商领域的单页设计,更像是对平面单页在使用环境上的升级,它不仅拥有平面设计中的所有设计规律,更有着网站设计的很多特点,比如:可以利用新的视差滚动和H5的技术,来使页面与人的交互更密切,也使得用户在浏览页面时,更像是在阅读一个故事. 它主要出现在一些促销类的活动页面.产品介绍页.店铺首页等需求中. 如下图 整体专题设计的"冰糖葫芦原则" 在设计单页的专题