给图片加边框效果,其实我们可以这样做–css定义图片属性

有时候我们自己拍的照片,或者做的图片,想给其加上一个边框和标记,一来图片会好看些,二来也可以加上自己的版权信息.

按照以前的方式,我们可能会去再做图工具去给图片做边框,然后加上自己需要的文字,一张张的制作,比较麻烦.其实css也可以来实现我们所需要的效果.

例如以上这副图片,其实我们只需要取其主体部分,白色的边框和文字我们可以用css来实现.这样一来我们会省掉很多的麻烦.也许在我们个人的小站,几张图片算不了什么.如果我们是公司的一个门户站,那么我们还是用css来做吧.

首先,给页面的img属性给出如下定义.

td.pic img {
    background-color: #FFFFFF;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 40px;
    padding-left: 10px;
    border: 1px solid #CCCCCC;
    background-image: url(a.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

我们给img定义了上、左、右为10px，下为40px的边距。然后调用了一张图片做为背景，
注意这张图片就是我们用来标示版权信息和你写的文字的图片，然后给它定义为不重复，右下对齐的背景图片。当然，你也可以吧他定义到左上，左下等你想要放的位置。
通过如上定义，页面中所有调用来pic这个类的td里的img都会调用我们所做的效果.

以上只是小弟的对于图片这个属性的一些想法，当然，相信你也能有更多的好的方法来实现更多的效果。。。 [lol]

Random Posts

这篇文章发布于 2007年07月25日，星期三，17:20，归类于 web开发, 历史文档。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

一条评论发表在“给图片加边框效果,其实我们可以这样做–css定义图片属性”上

盛者无罪说到：

2009-04-28 @ 00:37

正是我想要的，谢谢

[回复]

5key.net