纯CSS圆角框2:透明圆角化背景图片
|
在上面的案例中，我只给出最为原始的圆角框模子，它照旧存在一些不敷之处。好比不能将图片应用到圆角框内。而在本例中，我会在上面的基本上作出一些创新。就是将配景图片也圆角化，仿佛今朝在收集上还没有这样的成果应用，我只见过用js方法来实现的，可以参看我的《超油滑圆角框的半美满办理方案》一文中后头几种JS方案。可是纯CSS方法的实现然则我独家所创，若有类似，只能说好汉所见略同。呵呵! 照旧先看看最终的结果图，让各人有一个或许的印象。
图一 像这种小面积机关在网页计划中应用得很广泛，但今朝收集风行的作法都是回收图片的方法来实现的，将图片按上中下切成三块内容，然后行使三个同级的DIV或SPAN容器各自添补一张图，可是这种要领有一个最大的短处：不能自动顺应宽度的变革，一样平常做法都是回收牢靠宽度的方法，这是因为图片的宽度抉择的。 虽然对付一些较量有履历的职员来说，可以回收九宫格机关(可参看我的另一篇文章《九宫格根基机关》)方法可能滑动门方法来做到自顺应宽度的变革，九宫格一样平常都必要用到八张图片，而滑动门固然只用一张图片，但为了顺应宽度的变革，这张图片一样平常都做得很大。 而我此刻独创的这种要领可以完全做到顺应差异的宽度必要，而且所有兼容全部的赏识器，而所必要的仅仅是一张很小的程度平辅的配景图片罢了。 空话少说，言归正传。 根基道理： 我们都知道图片是方方正正的，不行能做出圆角结果，那么我们怎样来做外圆透明的图片呢?着实原理声名白也就是一件很简朴的工作，你看过下面的放大表示图后也许就会“哦”地一声，原本不外云云……
图二 是的，看到这个结果图你会一览无余，然则要想到这个要领，我却挥霍了不少脑细胞。呵呵! 实现这种要领道理很简朴：在每个b标签中各加载一次同样的图片，并团结配景定位background-position方法来到达结果。我们知道，统一张图片加载几多次对付机能的影响并不大，由于这张图片已经被电脑缓存到当地，和用css sprites归并图片一样的原理。 可是必要留意的是：每个b标签加载图片的定位是纷歧样的。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
