|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
网页制造poluoluo文章简介:在后面一篇文章中,我们将一张高低突变的的图片作为题目的背景,并将它使用了圆角效果。是否是这类圆角框只能用于对照单调的图片呢?我们还能将一些色彩对照丰厚的图片也举行通明圆角化吗?
在后面一篇文章中,我们将一张高低突变的的图片作为题目的背景,并将它使用了圆角效果。是否是这类圆角框只能用于对照单调的图片呢?我们还能将一些色彩对照丰厚的图片也举行通明圆角化吗?
谜底是一定的,上面看看它的最终工夫。
仍是先看最后的效果吧:
图一
看到了吧,这就是用纯CSS完成的圆角化图片,为了能看到通明化的效果,我特地使用了一个背景图片,你能够下载本模子到你的电脑中,随便伸缩窗口的巨细,看看外圆角是不是是通明的。
有了这类效果,你不再愁给每张图片作圆角的事情,这类效果在一些图片类的演示页面中常常见到,出格合用那些图片对照多的列表中。怎样,效果还能够吧!
好了,我们来看看它的完成机制吧!
完成道理:
这类效果实在就是我在第二章中变体完成,上面讲一讲次要的关头代码。
次要变更的仍是背景图片的定位,只是这一次与第二章中的有些分歧,此次必要思索到上面的两个圆角的变更。
先看看下面两个圆角的完成:
/*图片偏移定位--下面部分*/
.sharpb.b2{background-position:-4pxtop;}
.sharpb.b3{background-position:-2px-1px;}
.sharpb.b4{background-position:-1px-2px;}
再看看上面两个圆角的款式设置,上面部分和下面部分是互相对应的。
/*图片偏移定位--上面部分*/
.sharpb.b7{background-position:-4pxbottom;}
.sharpb.b6{background-position:-2pxbottom;}
.sharpb.b5{background-position:-1pxbottom;}
分歧的图片挪用款式:
/*色彩计划一,绿色作风----------------------------------------*/
/*边框色*/
.color1.b2,.color1.b3,.color1.b4,.color1.b5,.color1.b6,
.color1.b7,.color1.content{border-color:#262626;}
.color1.b1,.color1.b8{background:#262626;}
/*图片路径*/
.color1.b2,.color1.b3,.color1.b4,.color1h3,.color1.b5,.color1.b6,.color1.b7,.color1.content{background:url(image/1.jpg)no-repeat;}
后面两句配合组成边线框的色彩值,必要设置成统一个色值,前面的一句设置图片的挪用路径。
三句话就弄定一种色彩计划了。
</p>
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。 |
|