制作浮雕式的超链接_css浮雕图片背景超链接-CSDN博客

本文链接：https://blog.csdn.net/hml988/article/details/108276904

浮雕式的超链接通过超链接的背景图片和伪类别属性的背景图片的变换实现。

2.浮雕背景制作方法

打开photoship，新建一张图像，宽度80，高度32，然后选择一种前景颜色进行填充，填充使用快捷键Alt+Delete；
新建一个图层，命名为白色光，用矩形选择工具在矩形上端选择出一个横条区域，用白色填充；
在任意位置单击以取消选区，然后选择菜单栏的“滤镜–>模糊–>高期模糊”，给该图层添加高斯滤镜，设置半径为5.0；
单击OK按钮确认后，在图层面板中将该白色光图层的透明度设置为90%。

实现步骤：

通过两个table表格建立网页的框架，1个table用于加载banner图片，1个table用于显示超链接菜单显示。
为两个table加载背景图片，背景图片设为水平重复repeat-x，将背景表格的宽度设为100%。
超链接a元素设置样式，超链接按钮加载背景图片，将a元素设置宽度及高度，刚好容纳背景图片。关键步骤
设置超链接a元素的伪类属性，a:link a:visited 字体的颜色 a:hover 设置背景图片的变换。

<html>
<head>
	<title>浮雕式的超链接</title>
	<meta charset="utf-8">
	<style type="text/css">
		table.banner{ /*设置表格的背景图片*/
		background:url(banner_bg.jpg) repeat-x;  
		width:100%;
		}
		table.links{ /*设置表格的背景图片*/
		background:url(botton1_bg.jpg) repeat-x;
		width:100%;
		}
		a{  /*设置超链接a元素的样式 关键步骤 */
		width:80px;
		height:32px;
		text-decoration:none;
		text-align:center;
		background:url(button1.jpg) no-repeat;   /*设置a元素的背景图片*/
		padding-top:10px;
		}
		a:link,a:visited{
		color:#654300;
		}
		a:hover{ 
		background:url(button2.jpg) no-repeat;
		color:#ffffff;
		}
	</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner" >
	<tr><td><img src="banner1.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
	<tr><td><a href="#">首页导读</a><a>在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr>
</table>
</body>
</html>