8

我有一个比例矢量图像，我希望它填充一个容器。SO上有几个这样的问题，尽管它们有点老了。例如拉伸和缩放 CSS 背景

但是，当我尝试实施此类解决方案时，结果令人失望。

例如：

    body  {

    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000;
    background-color: #000
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;

}

...

.twoColLiqLtHdr #container {
    width: 80%;
    margin: 0 auto; 
    border: 2px solid #000000;
    text-align: left; 
    background-color: #003;
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */

  background-repeat: no-repeat; 
    color: #000;
    font-family: "Times", cursive;


    background-attachment:fixed;
    min-height:100%;
    /*top: 0;
    left: 0; */



}

我尝试了各种安排，但如果不留下空白区域，我就无法让它伸展（重复是一种成功，但看起来很糟糕）。

但是，由于我正在使用 svg，我是否以错误的方式处理这个问题，我应该在 html 中使用 svg xmlns 标记吗？（PS 我知道 IE8 绝对无法处理 svgs）

4

2 回答 2

24

你有没有尝试过

background-size:cover;

检查一些例子。

我遇到了 webkitbackground-size:cover和 SVG 背景图像的问题。我解决了它添加

-webkit-background-origin:border;
于 2012-09-26T12:41:33.537 回答
13

您可能需要添加 preserveAspectRatio="none" 作为<svg>SVG 图像本身的外部元素的属性。

如果您不想修改图像文件，那么您可以尝试

背景图像： url('background_image.svg#svgView(preserveAspectRatio(none))');

Firefox 15 将支持这一点，可能还会支持其他 UA。

于 2012-09-26T12:57:07.810 回答