WEB开发网
开发学院软件教学网络软件 仿6room网站图片链接效果(二) 阅读

仿6room网站图片链接效果(二)

 2009-05-30 10:50:20 来源:WEB开发网   
核心提示: 三、分析实现方法此实例效果一定会用到层的叠加和相对、绝对定位,而且要应用CSS透明度滤镜,仿6room网站图片链接效果(二),这是应该首先会想到的,它的原理是让两个层完美吻合的叠加,接着为这一图层加上个半透明滤镜效果,并重新给出一个margin值,一个层默认时隐藏掉,用鼠标事件触发显示

三、分析实现方法

此实例效果一定会用到层的叠加和相对、绝对定位,而且要应用CSS透明度滤镜,这是应该首先会想到的。它的原理是让两个层完美吻合的叠加,一个层默认时隐藏掉,用鼠标事件触发显示,另外左下角的“+”图形默认情况没有隐藏掉,要把它独立出来处理。

1.默认情况下,如果里面的大图片没有下载完,会有一块灰色的色块,图形下载完了,在图片四周会有灰色的边界,所以在这里组织一个有3px填充的大盒子,内容区块大小与图片大小相等,加上灰色的背景,设置其定位方式为相对定位,等一下其内部元素就可以以它为参考进行绝对定位,所以用到下面样式:

.blueidea {
background-color: #CCC;
margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
padding: 3px;/*形成边框装饰,同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
height: 96px;/*与图片等高*/
width: 128px;
position: relative;
float:left;/*让三个实例横向排列*/
}

2.限定图片大小,并不显示边框,用到下面样式:

.blueidea a img {
height: 96px;
width: 128px;
border:none;
}

3.组织文字说明图层,让其大小比下层稍小(因为我安排了1px的边框),在这个盒子内,让其上边有一定填充(不要用边界,因为我们等一下要用到半透明效果,这个效果是覆盖下面整个区域的),让文字说明不会靠着上边,再让文字缩进一段距离,主要是为了方便等一下对LOGO做背景精确定位到文字说明前,文字不会与LOGO重叠在一起。(在做的时候可以多次精细调节,直至达到满意为止)。接着为这一图层加上个半透明滤镜效果,并重新给出一个margin值,等一下我们要用这种方法来初始化说明图层移出可视区域。用到下面样式:

1 2 3 4 5 6  下一页

Tags:room 网站 图片

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接