链接是图像的一部分。调整大小的问题

时间:2014-02-04 13:36:12

标签: html css

只有一个背景图像,链接图像是图像的一部分。我需要将<a href="#" ..附加到此背景图片上。

问题:

由于这些图像是图像的一部分,因此使其响应变得非常困难。 目前,我的div包含a标记,其中包含所需的href属性。

CSS:

#link_div {
 height: 14%;
 left: 29%;
 top: 44%;
 width: 6%;
}

enter image description here

如果我调整窗口大小,则需要根据新的窗口大小动态更改heightlefttopwidth。是否可以用CSS解决?

2 个答案:

答案 0 :(得分:2)

是的,你可以。如果你有绝对链接,你的css代码将是这样的:

a {
    display:block;
    width:100px;
    height:50px;
    position:absolute;
    z-index:9;
    left:calc(50% - 50px);
    left:-ms-calc(50% - 50px);
    left:-moz-calc(50% - 50px);
    top:calc(50% - 50px);
    top:-ms-calc(50% - 25px);
    top:-moz-calc(50% - 25px);
}

有了这个css你的tg总是居中。如果你想要别的东西你改变css参数。抱歉英语不好。

答案 1 :(得分:1)

这是您可以执行的选项,SVG图片可以提供很多帮助。 (可缩放矢量图形)

这样可以让圈子尽可能地响应,拥有不错的浏览器支持IE9 +,并且文件很小。

使css流畅的css:

div.circ-wrap {
    width: 80%;
    margin: 0 auto;
}

div.circ-wrap a {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    border-radius: 50%;
}

div.circ-wrap img {
    width: 100%;
}

div.circ-wrap span {
    position: absolute;
    height: 60px;
    width: 60px;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    display: block;
    text-align: center;
}

最后,小提琴:Demo

另外,中心圆圈的小提琴:Demo