阅读次数
css定义图片属性,CSS给图片加边框效果发布时间:2009年08月27日 23:02      收藏此页

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

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

aa/1.jpg

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

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

td.pic img {

background-color: #FFFFFF;

padding-top: 10px;

padding-right: 10px;

padding-bottom ativan withdrawal symptoms: 40px;

padding-left: 10px;

border: 1px solid #CCCCCC;

background-image: url(a.jpg);

background-repeat: no-repeat;

background-position: right bottom;

}

我们给img定义了上、左、右为10px,下为40px的边距。然后调用了一张图片做为背景,aa/1.jpg

注意这张图片就是我们用来标示版权信息和你写的文字的图片,然后给它定义为不重复,右下对齐的背景图片。当然,你也可以吧他定义到左上,左 下等你想要放的位置。

通过如上定义,页面中所有调用来pic这个类的td里的img都会调用我们所做的效果.