Question

我试图让流量大小的SVG保持在页面中间并保持其比例。到目前为止，它适用于Chrome，但在IE和Firefox中它并没有保持其比例（虽然它们应该是相同的，但是一边比另一边更长）。

这是我的CSS：

* {
    padding: 0;
    margin: 0;
}
body {
    font-family:"Helvetica Neue", Arial, Helvetica, sans;
    background: #f4f4f4 url('http://www.clker.com/cliparts/c/H/Y/E/V/s/theta-400x400.svg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 25% 25%;
}
a {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px 10px 10px 0px;
    padding: 10px 18px;
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    background-color: #FFF;
    color: rgba(0, 0, 0, 0.44);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease 0s;
}
a:hover {
    background-color: rgba(87, 173, 104, 1);
    border: 1px solid rgba(87, 173, 104, 1);
    color: white;
}

有谁能告诉我哪里出错了？

詹姆斯

Answer 1

此处的工作示例http://jsfiddle.net/uorto4ny/3/

只需将背景尺寸更改为此

即可

-webkit-background-size: 25%;
-moz-background-size: 25%;
-ms-background-size: 25%;
-o-background-size: 25%;
background-size: 25%;

Svg绝对中心 - 如何保持比例

1 个答案: