背景无故透明

Question

我目前正在开发我的新网站。 www.sgdesign.nl（完成后会改变）

我遇到了一个非常奇怪的问题。 google Chrome 我的标志背景是透明的，但我不明白为什么。我使用 .svg 文件作为徽标，因为它更轻并且可以随尺寸缩放而不会损失质量。

-HTML-

<div id="logo_background">
<div id="logo"></div>
</div>

-CSS-

#logo_background {
    float:none;
    padding-left:5px;
    opacity:1;
    margin:auto;
    margin-top:-10px;
    width:142px;
    height:160px;
    background-color:White;
    border-radius:0 0 15px 15px;
}

#logo {
    margin:auto;
    width:120px;
    height:150px;
    background-image:url(../images/SG_Design_Logo.svg);
    background-repeat:no-repeat;
    background-size:150px;
    background-position:center center;
}

我不知道为什么徽标背景的顶部在 google Chrome 中是透明的。我期待着建议和修复

-编辑- 我已将背景颜色更改为绿色以更好地突出问题。

Answer 1

您的图像不透明。

背景矩形有白色填充

<rect y="1" fill="#FFFFFF" width="595.3" height="594.3"/>

您需要将其更改为

<rect y="1" fill=none" width="595.3" height="594.3"/>

body {
  background: black;
}
svg {
  width: 250px;
  height: 250px;
  margin: 25px;
}

<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 595.3" enable-background="new 0 0 595.3 595.3" xml:space="preserve">
  <rect y="1" fill="none" width="595.3" height="594.3" />
  <circle fill="#F7941E" cx="297.8" cy="240.2" r="239.2" />
  <g opacity="0.1">

    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="203.675" y1="416.455" x2="422.2705" y2="197.8596" gradientTransform="matrix(1 0 0 -1 57.6481 595.2601)">
      <stop offset="0" style="stop-color:#000000" />
      <stop offset="1" style="stop-color:#58595B" />
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M349.6,362.8c-2.5,1.8-5.5,3.2-8.9,4.3c-9.5,0.9-19.2,1.4-29,1.4c-31.7,0-57.1-7.8-76.4-23.3
  l126.1,126.1c94.7-25.9,166.2-108.2,176.1-208.6L400.6,125.8l-17.3,41.7c-6.1-3-20.8-14.2-27-16.3l-58.5-2l-35.9,29l-10.8,16.5
  l-12.4,28.6l14,48.7c2.8,12.1,7.3,22.1,13.5,30.2c11.2,14.4,27.5,21.6,48.9,21.6c10.2,0,20.6-1,31.1-2.9c3.6,2.8,6.4,5.6,8.5,8.5
  c2.8,3.9,4.1,8.3,4.1,13.2C359,351.6,355.8,358.3,349.6,362.8z" />

    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="203.675" y1="416.455" x2="422.2705" y2="197.8596" gradientTransform="matrix(1 0 0 -1 57.6481 595.2601)">
      <stop offset="0" style="stop-color:#000000" />
      <stop offset="1" style="stop-color:#58595B" />
    </linearGradient>
    <path fill="url(#SVGID_2_)" d="M349.6,362.8c-2.5,1.8-5.5,3.2-8.9,4.3c-9.5,0.9-19.2,1.4-29,1.4c-31.7,0-57.1-7.8-76.4-23.3
  l126.1,126.1c94.7-25.9,166.2-108.2,176.1-208.6L400.6,125.8l-17.3,41.7c-6.1-3-20.8-14.2-27-16.3l-58.5-2l-35.9,29l-10.8,16.5
  l-12.4,28.6l14,48.7c2.8,12.1,7.3,22.1,13.5,30.2c11.2,14.4,27.5,21.6,48.9,21.6c10.2,0,20.6-1,31.1-2.9c3.6,2.8,6.4,5.6,8.5,8.5
  c2.8,3.9,4.1,8.3,4.1,13.2C359,351.6,355.8,358.3,349.6,362.8z" />

    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="203.675" y1="416.455" x2="422.2705" y2="197.8596" gradientTransform="matrix(1 0 0 -1 57.6481 595.2601)">
      <stop offset="0" style="stop-color:#000000" />
      <stop offset="1" style="stop-color:#58595B" />
    </linearGradient>
    <path fill="url(#SVGID_3_)" d="M349.6,362.8c-2.5,1.8-5.5,3.2-8.9,4.3c-9.5,0.9-19.2,1.4-29,1.4c-31.7,0-57.1-7.8-76.4-23.3
  l126.1,126.1c94.7-25.9,166.2-108.2,176.1-208.6L400.6,125.8l-17.3,41.7c-6.1-3-20.8-14.2-27-16.3l-58.5-2l-35.9,29l-10.8,16.5
  l-12.4,28.6l14,48.7c2.8,12.1,7.3,22.1,13.5,30.2c11.2,14.4,27.5,21.6,48.9,21.6c10.2,0,20.6-1,31.1-2.9c3.6,2.8,6.4,5.6,8.5,8.5
  c2.8,3.9,4.1,8.3,4.1,13.2C359,351.6,355.8,358.3,349.6,362.8z" />

    <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="203.675" y1="416.455" x2="422.2705" y2="197.8596" gradientTransform="matrix(1 0 0 -1 57.6481 595.2601)">
      <stop offset="0" style="stop-color:#000000" />
      <stop offset="1" style="stop-color:#58595B" />
    </linearGradient>
    <path fill="url(#SVGID_4_)" d="M349.6,362.8c-2.5,1.8-5.5,3.2-8.9,4.3c-9.5,0.9-19.2,1.4-29,1.4c-31.7,0-57.1-7.8-76.4-23.3
  l126.1,126.1c94.7-25.9,166.2-108.2,176.1-208.6L400.6,125.8l-17.3,41.7c-6.1-3-20.8-14.2-27-16.3l-58.5-2l-35.9,29l-10.8,16.5
  l-12.4,28.6l14,48.7c2.8,12.1,7.3,22.1,13.5,30.2c11.2,14.4,27.5,21.6,48.9,21.6c10.2,0,20.6-1,31.1-2.9c3.6,2.8,6.4,5.6,8.5,8.5
  c2.8,3.9,4.1,8.3,4.1,13.2C359,351.6,355.8,358.3,349.6,362.8z" />

    <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="203.675" y1="416.455" x2="422.2705" y2="197.8596" gradientTransform="matrix(1 0 0 -1 57.6481 595.2601)">
      <stop offset="0" style="stop-color:#000000" />
      <stop offset="1" style="stop-color:#58595B" />
    </linearGradient>
    <path fill="url(#SVGID_5_)" d="M349.6,362.8c-2.5,1.8-5.5,3.2-8.9,4.3c-9.5,0.9-19.2,1.4-29,1.4c-31.7,0-57.1-7.8-76.4-23.3
  l126.1,126.1c94.7-25.9,166.2-108.2,176.1-208.6L400.6,125.8l-17.3,41.7c-6.1-3-20.8-14.2-27-16.3l-58.5-2l-35.9,29l-10.8,16.5
  l-12.4,28.6l14,48.7c2.8,12.1,7.3,22.1,13.5,30.2c11.2,14.4,27.5,21.6,48.9,21.6c10.2,0,20.6-1,31.1-2.9c3.6,2.8,6.4,5.6,8.5,8.5
  c2.8,3.9,4.1,8.3,4.1,13.2C359,351.6,355.8,358.3,349.6,362.8z" />

    <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="203.675" y1="416.455" x2="422.2705" y2="197.8596" gradientTransform="matrix(1 0 0 -1 57.6481 595.2601)">
      <stop offset="0" style="stop-color:#000000" />
      <stop offset="1" style="stop-color:#58595B" />
    </linearGradient>
    <path fill="url(#SVGID_6_)" d="M349.6,362.8c-2.5,1.8-5.5,3.2-8.9,4.3c-9.5,0.9-19.2,1.4-29,1.4c-31.7,0-57.1-7.8-76.4-23.3
  l126.1,126.1c94.7-25.9,166.2-108.2,176.1-208.6L400.6,125.8l-17.3,41.7c-6.1-3-20.8-14.2-27-16.3l-58.5-2l-35.9,29l-10.8,16.5
  l-12.4,28.6l14,48.7c2.8,12.1,7.3,22.1,13.5,30.2c11.2,14.4,27.5,21.6,48.9,21.6c10.2,0,20.6-1,31.1-2.9c3.6,2.8,6.4,5.6,8.5,8.5
  c2.8,3.9,4.1,8.3,4.1,13.2C359,351.6,355.8,358.3,349.6,362.8z" />
  </g>
  <path fill="#FFFFFF" d="M302.2,224.4c0,4.7,1.1,8.8,3.3,12.3c2.2,3.5,5.7,6.9,10.4,10.2c4.8,3.3,16.1,9.2,33.9,17.7
 c23.6,11.3,39.7,22.6,48.5,33.9c1.1,1.4,2.2,2.9,3.1,4.5v-79.6h-99.2C302.3,223.8,302.2,224.1,302.2,224.4z" />
  <path fill="#FFFFFF" d="M340.7,367.1c3.4-1.1,6.4-2.5,8.9-4.3c6.3-4.5,9.4-11.2,9.4-20c0-4.9-1.4-9.3-4.1-13.2
 c-2.1-2.9-5-5.8-8.5-8.5c-10.5,1.9-20.9,2.9-31.1,2.9c-21.4,0-37.7-7.2-48.9-21.6c-11.2-14.4-16.8-35.3-16.8-62.7
 c0-26.2,7-47.1,20.9-62.6c13.9-15.5,32.4-23.3,55.5-23.3c19.9,0,39,4.6,57.4,13.8l17.8-42.8c-24-10.3-49-15.5-74.9-15.5
 c-41.3,0-73.6,11.4-96.8,34.2s-34.9,54.5-34.9,95.2c0,41.9,10,74,30.1,96.3c20.1,22.4,49.1,33.5,87.2,33.5
 C321.5,368.5,331.2,368,340.7,367.1z" />
  <g>
    <path fill="#F7941E" d="M92.9,551.3c0,4.6-1.6,8.2-4.9,10.8c-3.3,2.6-7.9,3.9-13.7,3.9c-5.4,0-10.2-1-14.3-3v-10
  c3.4,1.5,6.3,2.6,8.7,3.2c2.4,0.6,4.5,0.9,6.5,0.9c2.4,0,4.2-0.5,5.4-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1-0.3-1.9-0.8-2.6
  c-0.6-0.8-1.4-1.5-2.4-2.2c-1.1-0.7-3.3-1.9-6.6-3.4c-3.1-1.5-5.4-2.9-7-4.2c-1.6-1.3-2.8-2.9-3.7-4.7c-0.9-1.8-1.4-3.9-1.4-6.2
  c0-4.5,1.5-8,4.6-10.6c3-2.6,7.2-3.8,12.6-3.8c2.6,0,5.1,0.3,7.5,0.9s4.9,1.5,7.5,2.6l-3.5,8.3c-2.7-1.1-4.9-1.9-6.7-2.3
  s-3.5-0.7-5.2-0.7c-2,0-3.6,0.5-4.7,1.4s-1.6,2.2-1.6,3.7c0,0.9,0.2,1.8,0.7,2.5c0.4,0.7,1.1,1.4,2.1,2c1,0.7,3.2,1.8,6.8,3.6
  c4.7,2.3,8,4.5,9.7,6.8C92.1,545.1,92.9,548,92.9,551.3z" />
    <path fill="#F7941E" d="M135.5,536.9h20.1v26.3c-3.3,1.1-6.3,1.8-9.2,2.2c-2.9,0.4-5.8,0.6-8.8,0.6c-7.6,0-13.5-2.2-17.5-6.7
  c-4-4.5-6-10.9-6-19.3c0-8.2,2.3-14.5,7-19.1s11.2-6.9,19.5-6.9c5.2,0,10.2,1,15,3.1l-3.6,8.6c-3.7-1.8-7.5-2.8-11.5-2.8
  c-4.6,0-8.4,1.6-11.2,4.7c-2.8,3.1-4.2,7.3-4.2,12.6c0,5.5,1.1,9.7,3.4,12.6c2.3,2.9,5.5,4.3,9.8,4.3c2.2,0,4.5-0.2,6.8-0.7v-10.6
  h-9.6L135.5,536.9L135.5,536.9z" />
    <path fill="#F7941E" d="M256.5,539.5c0,8.3-2.4,14.7-7.1,19.2c-4.7,4.4-11.6,6.7-20.6,6.7h-14.3v-50.6h15.9
  c8.3,0,14.7,2.2,19.3,6.5C254.2,525.6,256.5,531.7,256.5,539.5z M245.3,539.8c0-10.9-4.8-16.3-14.4-16.3h-5.7v33h4.6
  C240.1,556.5,245.3,550.9,245.3,539.8z" />
    <path fill="#F7941E" d="M310.3,565.3h-29.2v-50.6h29.2v8.8h-18.4v11.1H309v8.8h-17.1v13.1h18.4V565.3z" />
    <path fill="#F7941E" d="M365,551.3c0,4.6-1.6,8.2-4.9,10.8c-3.3,2.6-7.9,3.9-13.7,3.9c-5.4,0-10.2-1-14.3-3v-10
  c3.4,1.5,6.3,2.6,8.7,3.2c2.4,0.6,4.5,0.9,6.5,0.9c2.4,0,4.2-0.5,5.4-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1-0.3-1.9-0.8-2.6
  c-0.6-0.8-1.4-1.5-2.4-2.2c-1.1-0.7-3.3-1.9-6.6-3.4c-3.1-1.5-5.4-2.9-7-4.2c-1.6-1.3-2.8-2.9-3.7-4.7c-0.9-1.8-1.4-3.9-1.4-6.2
  c0-4.5,1.5-8,4.6-10.6c3-2.6,7.2-3.8,12.6-3.8c2.6,0,5.1,0.3,7.5,0.9c2.4,0.6,4.9,1.5,7.5,2.6l-3.5,8.3c-2.7-1.1-4.9-1.9-6.7-2.3
  c-1.8-0.4-3.5-0.7-5.2-0.7c-2,0-3.6,0.5-4.7,1.4s-1.6,2.2-1.6,3.7c0,0.9,0.2,1.8,0.7,2.5c0.5,0.7,1.1,1.4,2.1,2
  c1,0.7,3.2,1.8,6.8,3.6c4.7,2.3,8,4.5,9.7,6.8S365,548,365,551.3z" />
    <path fill="#F7941E" d="M388.3,565.3v-50.6H399v50.6H388.3z" />
    <path fill="#F7941E" d="M445.2,536.9h20.1v26.3c-3.3,1.1-6.3,1.8-9.2,2.2c-2.9,0.4-5.8,0.6-8.8,0.6c-7.6,0-13.5-2.2-17.5-6.7
  c-4-4.5-6-10.9-6-19.3c0-8.2,2.3-14.5,7-19.1s11.2-6.9,19.5-6.9c5.2,0,10.2,1,15,3.1l-3.6,8.6c-3.7-1.8-7.5-2.8-11.5-2.8
  c-4.6,0-8.4,1.6-11.2,4.7c-2.8,3.1-4.2,7.3-4.2,12.6c0,5.5,1.1,9.7,3.4,12.6c2.3,2.9,5.5,4.3,9.8,4.3c2.2,0,4.5-0.2,6.8-0.7v-10.6
  h-9.6L445.2,536.9L445.2,536.9z" />
    <path fill="#F7941E" d="M536.5,565.3h-13.6l-22-38.3h-0.3c0.4,6.8,0.7,11.6,0.7,14.5v23.8h-9.7v-50.6h13.5l22,37.9h0.2
  c-0.3-6.6-0.5-11.2-0.5-14v-24h9.7L536.5,565.3L536.5,565.3z" />
  </g>
</svg>

注意...徽标现在将在下方显示 logo_background 颜色...当前为白色。如果你不想要，你应该删除它。

Answer 2

Paulie_D已经在评论中解释了这一点，只是为了说清楚，原因如下：

您的 SVG 是正方形 (595.3 x 595.3)，但您将其放在非正方形的 parent <div> 中。它是 120px x 150px。

默认情况下，浏览器会缩小 SVG 以适合矩形，同时保持 SVG 的原始纵横比（正方形）。它还会将其居中放置在ractangle中。所以你最终会在矩形 parent <div>.

的顶部和底部出现空白（即 transparent）区域

这应该发生在所有浏览器上，而不仅仅是 Chrome。

如果你想去掉反式parent 区域，那么你也应该使你的 parent <div> 正方形。 IE。 120x120 或 150x150。

背景无故透明

Background transparent for no reason

html

css

svg

background

transparent