logo标签列表

使用SVG作为背景图像

csssvg
80
我似乎无法使这个按预期工作。我的页面根据加载的内容而改变高度，如果需要滚动，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库或调用其他的方法...有什么想法吗？
6个回答
92

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

svg background image css

以下是防弹解决方案：

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

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

fa-calendar-alt

(任何 IDE 都可以像下面显示的那样打开svg图像)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>

要在css background-image 中使用它，您需要对svg进行编码以生成有效的字符串。 我使用了此工具（名称：URL解码器-转换混淆地址）。

只要您拥有所需的所有内容，就可以进入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);
    }
30
你可以尝试移除SVG根元素上的width和height属性，改为添加preserveAspectRatio="none" viewBox="0 0 1024 800"。这至少在Opera浏览器上会有所区别，假设你想让SVG拉伸以填满CSS样式定义的整个区域。
10

尝试将它放在你的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;
}
1
当SVG中指定的高度达到800像素后，它会不断重复。我尝试将SVG中的高度和宽度设为100％，但情况只会变得更糟。 - Dirty Bird Design
1
你确定它在重复吗？你有一个带有背景颜色的矩形，从底部露出来。 - methodofaction
4
你已经使用了外部SVG文件，但是许多人来到这里也希望在CSS中找到内联SVG的解决方案。 - vsync
3

将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;
}
2
您在svg标记中设置了固定的宽度和高度，这可能是您问题的根源。尝试不要删除它们，并使用CSS设置宽度和高度（如果需要的话），而不是固定数值。
0

检查SVG是否为透明设计，尝试向容器添加背景颜色并检查它是否对不同的背景颜色可见。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接