CSS中可以使用background-image属性来设置背景图片,但是如何把图片变成连接呢?a { display: inline-block; height: 100px; width: 100p
CSS中可以使用background-image属性来设置背景图片,但是如何把图片变成连接呢?
a { display: inline-block; height: 100px; width: 100px; background-image: url('image.jpg'); background-size: cover; } a:hover { opacity: 0.7; }
以上代码把a标签设置成了一个显示背景图片的长方形,在:hover状态下会出现透明效果。
如果需要把图片作为链接,可以给a标签添加href属性:
<a href="http://example.com"></a>
这样就可以通过点击图片来跳转到指定网页了。如果需要加上图片描述,可以使用alt属性:
<a href="http://example.com" alt="这是一个图片链接"></a>
PS:在使用background-image属性时,需要加上background-repeat和background-position属性,否则图片会重复平铺。
粉丝
0
关注
0
收藏
0