在网页设计中,我们常常需要在图片上添加链接,让用户能够从图片中跳转至其它页面。CSS提供了一个很方便的方式来实现。下面就来学习如何在CSS中给图片添加链接。首先,我们需要在HTML代码中添加一个带有链
<a href="http://www.example.com/"> <img src="image.jpg" alt="example"> </a>
<style> a img { border: none; /* 去掉图片边框 */ display: block; /* 让图片成为块级元素,占据整行 */ } </style>
<style> a img { border: none; /* 去掉图片边框 */ display: block; /* 让图片成为块级元素,占据整行 */ position: relative; /* 设置图片为相对定位 */ } a:hover:after { content: attr(title); /* 将鼠标停留时的title内容显示在提示框中 */ position: absolute; /* 设置提示框为绝对定位 */ left: 50%; /* 将提示框水平居中 */ bottom: -20px; /* 将提示框向下偏移,使其不与图片重叠 */ background-color: #333; /* 设置提示框的背景颜色 */ color: #fff; /* 设置提示框文字颜色 */ font-size: 14px; /* 设置提示框文字大小 */ padding: 5px; /* 设置提示框内边距 */ white-space: nowrap; /* 防止提示框中的文字换行 */ opacity: 0; /* 将提示框的透明度设为0,方便设置过渡效果 */ transition: 0.3s; /* 设置过渡效果 */ } a:hover:after { opacity: 1; /* 鼠标停留时将提示框的透明度设为1 */ } </style>
粉丝
0
关注
0
收藏
0