只有一个背景图像,链接图像是图像的一部分。我需要将<a href="#" ..
附加到此背景图片上。
问题:
由于这些图像是图像的一部分,因此使其响应变得非常困难。
目前,我的div包含a
标记,其中包含所需的href
属性。
CSS:
#link_div {
height: 14%;
left: 29%;
top: 44%;
width: 6%;
}
如果我调整窗口大小,则需要根据新的窗口大小动态更改height
,left
,top
,width
。是否可以用CSS解决?
答案 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