内容营销
轻松完成身体背景图片
在许多站点上都可以找到的一个不错的功能是,中心内容区域似乎覆盖了页面,并在页面后面放置了阴影。 实际上,这是一种非常简单的方法,可以通过单个背景图像使您的博客(或其他网站)看起来不错。
怎么做
- 找出内容的范围。 例如:750px。
- 在您的插图应用程序(我使用Illustrator)中构建比内容区域宽的图像。 例如:800px。
- 将图像的背景设置为您希望博客两边都具有的背景。
- 在背景上添加白色区域。
- 在从该区域的任一侧突出的白色区域上应用阴影。
- 将裁切区域的宽度设置为高1像素。 这将使下载的图像美观且紧凑,可以快速渲染。
- 输出图像。
这是我使用Illustrator构造它的方式(请注意,我的作物区域高得多……这是为了让您可以看到我在做什么):
这是输出与背景图像的外观示例:
这是在您的身体中使用身体样式标签应用图像的方法
的CSS 文件中。背景:#B2B2B2 url('images / bg.gif')重复-y中心;
以下是背景样式标签的剖析:
- #B2B2B2 –设置页面的整体背景色。 在此示例中,为灰色以匹配背景图像上的灰色。
- url('images / bg.gif')–设置您要使用的背景图像。
- 重复y –将图像设置为在y轴上重复。 因此背景图片将从页面顶部到底部重复。
- center –将图像设置在页面中心。
简单易用...一张图片,一张样式标签!