Question

我似乎无法按需要使其工作。我的页面根据加载的内容更改高度，如果需要滚动，则svg似乎不会拉伸...

html {
  height: 100%;
  background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg);
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: cover;
}

<svg width="1024" height="800" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2">
                <stop stop-color="#ffffff" offset="0"/>
                <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
            </radialGradient>
            <radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5">
                <stop stop-color="#ffffff" offset="0"/>
                <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
            </radialGradient>
         </defs>
         <g display="inline">
            <title>Layer 1</title>
            <rect fill="#eaeaea" stroke-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/>
        </g>
         <g>
              <title>Layer 2</title>
              <rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/>
              <rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/>
         </g>
    </svg>

用CSS3可以做到这一点吗？我想不必加载另一个JS库或打电话......任何想法？谢谢！

Answer 1

您可以尝试删除svg根元素上的width和height属性，而是添加preserveAspectRatio="none" viewBox="0 0 1024 800"。它至少在Opera中有所不同，假设您希望svg伸展以填充CSS样式定义的整个区域。

Answer 2

使用我的解决方案，您可以获得类似的内容：

这是Bulletproff解决方案：

您的 html ： <input class='calendarIcon'/>

您的 SVG ：我使用了fa-calendar-alt

（任何 IDE 都可以打开svg图像，如下所示）

要在 css背景图像 中使用它，您必须对svg进行编码以解决有效字符串。我使用了this tool

就您所需要的一切而言，您将来到 css

.calendarIcon{
      //your url will be something like this:
      background-image: url("data:image/svg+xml,***<here place encoded svg>***");
      background-repeat: no-repeat;
    }

注意：这些样式不会对已编码的svg图像产生任何影响

.{
      fill: #f00; //neither this
      background-color: #f00; //nor this
}

因为在图像上的所有更改都必须直接应用于其svg代码

<svg xmlns="" path="" fill="#f00"/></svg>

为了获得正确的位置，我复制了一些Bootstrap间距，最后的CSS得到了下一个外观：

.calendarIcon{
      background-image: url("data:image/svg+xml,%3Csvg...svg%3E");
      background-repeat: no-repeat;
      padding-right: calc(1.5em + 0.75rem);
      background-position: center right calc(0.375em + 0.1875rem);
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

Answer 3

尝试将其放在body

上

body {
    height: 100%;
    background-image: url(../img/bg.svg);
    background-size:100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size:cover;
}

Answer 4

您已在svg标记中设置固定的宽度和高度。这可能是你问题的根源。尽量不要删除它们并使用CSS设置宽度和高度（如果需要）。

Answer 5

将背景svg设置为以内容/购物车为中心

.login-container {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh; 
  background-image: url(/assets/images/login-bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

使用SVG作为背景图像

5 个答案: