轻松完成身体背景图片

HTML

在许多站点上都可以找到的一个不错的功能是,中心内容区域似乎覆盖了页面,并在页面后面放置了阴影。 实际上,这是一种非常简单的方法,可以通过单个背景图像使您的博客(或其他网站)看起来不错。

怎么做

  1. 找出内容的范围。 例如:750px。
  2. 在您的插图应用程序(我使用Illustrator)中构建比内容区域宽的图像。 例如:800px。
  3. 将图像的背景设置为您希望博客两边都具有的背景。
  4. 在背景上添加白色区域。
  5. 在从该区域的任一侧突出的白色区域上应用阴影。
  6. 将裁切区域的宽度设置为高1像素。 这将使下载的图像美观且紧凑,可以快速渲染。
  7. 输出图像。

这是我使用Illustrator构造它的方式(请注意,我的作物区域高得多……这是为了让您可以看到我在做什么):
与插画家背景

这是输出与背景图像的外观示例:
背景图片示例

这是在您的身体中使用身体样式标签应用图像的方法 的CSS 文件中。

背景:#B2B2B2 url('images / bg.gif')重复-y中心;

以下是背景样式标签的剖析:

  • #B2B2B2 –设置页面的整体背景色。 在此示例中,为灰色以匹配背景图像上的灰色。
  • url('images / bg.gif')–设置您要使用的背景图像。
  • 重复y –将图像设置为在y轴上重复。 因此背景图片将从页面顶部到底部重复。
  • center –将图像设置在页面中心。

简单易用...一张图片,一张样式标签!

2条评论

  1. 1
  2. 2

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.