文章目录
- 一、滑动门技术
- 1、滑动门技术借助 CSS 精灵技术实现
- 2、外部标签设置左半部分背景图片
- 3、内部标签设置右半部分背景图片
- 4、鼠标经过时更换背景
- 二、完整代码示例
一、滑动门技术
1、滑动门技术借助 CSS 精灵技术实现
滑动门技术 就是 为文字设置背景 , 不管文字长度是多少 , , 如下所示 :
- 文本较短时的样式 :
- 文本较长时的样式 :
滑动门技术 是根据 CSS 精灵技术实现的 ;
滑动门的背景实际上是一个很长的元素 , 如下图所示 :
在下面的标签中 :
<a href="#">
<span>滑动门技术</span>
</a>将上述 <a> 标签设置为 行内块 元素 , 这样 该标签 的长度就取决于内部文本的长度 , 如果给标签设置背景 , 那么该背景只能显示一部分 ;
2、外部标签设置左半部分背景图片
为 <a> 标签设置背景图片为上述背景 , 该背景图片右侧就会出现截断 , 右侧的半圆肯定不完整 ; 其背景样式只有一截 , 如下图所示 :
a {
/* 行内块元素 宽度与内容相关 */
display: inline-block;
/* 高度与滑动门背景图片高度相同 */
height: 33px;
/* 文字垂直居中 */
line-height: 33px;
/* 设置背景 默认左对齐 */
background: url(images/slid_door.png) no-repeat;
margin: 10px;
/* 左侧设置内边距 用于撑开盒子 */
padding-left: 15px;
/* 设置文本颜色 */
color: #fff;
}
3、内部标签设置右半部分背景图片
为 <span> 标签设置该背景 , 只是设置为右对齐 , 由于 <a> 标签设置了左边距 , span 中的背景不能充满整个 <a> 标签 , 因此 <a> 标签背景左侧的半圆保留了下来 , 显示剩余的背景如下图所示 :
/* span 标签设置滑动门右侧 */
a span {
/* 设置为行内块元素 */
display: inline-block;
/* 内容高度 33 像素 滑动门图片为 33 像素 */
height: 33px;
/* 滑动门右侧需要右对齐*/
background: url(images/slid_door.png) no-repeat right;
/* 撑开右边的盒子 */
padding-right: 15px;
}
4、鼠标经过时更换背景
如果鼠标经过 滑动门 时 , 要更换背景 , 要同时将两个背景图片同时更换 ;
/* 鼠标经过更换背景 */
a:hover,
a:hover span {
background-image: url(images/slid_door_hover.png);
}
二、完整代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动门技术</title>
<style>
body {
background-color: #3A3A3A;
}
/* a 标签设置滑动门左侧 */
a {
/* 行内块元素 宽度与内容相关 */
display: inline-block;
/* 高度与滑动门背景图片高度相同 */
height: 33px;
/* 文字垂直居中 */
line-height: 33px;
/* 设置背景 默认左对齐 */
background: url(images/slid_door.png) no-repeat;
margin: 10px;
/* 左侧设置内边距 用于撑开盒子 */
padding-left: 15px;
/* 设置文本颜色 */
color: #fff;
}
/* span 标签设置滑动门右侧 */
a span {
/* 设置为行内块元素 */
display: inline-block;
/* 内容高度 33 像素 滑动门图片为 33 像素 */
height: 33px;
/* 滑动门右侧需要右对齐*/
background: url(images/slid_door.png) no-repeat right;
/* 撑开右边的盒子 */
padding-right: 15px;
}
/* 鼠标经过更换背景 */
a:hover,
a:hover span {
background-image: url(images/slid_door_hover.png);
}
</style>
</head>
<body>
<a href="#">
<span>滑动门技术</span>
</a>
<a href="#">
<span>骐骥一跃, 不能十步; 驽马十驾, 功在不舍;</span>
</a>
</body>
</html>显示效果 :
鼠标经过时的样式 :
