文章/答案/技术大牛

发布

社区首页 >问答首页 >css中的内联svg隐藏在div后面

问css中的内联svg隐藏在div后面
EN

Stack Overflow用户

提问于 2019-03-04 19:18:46

回答 2查看 908关注 0票数 0

我在CSS中使用inline-SVG，这样就可以看到图像了。但是，它不起作用，因为图像隐藏在整个div后面，即使我添加一个z索引，图像也看不到。此外，图像被放置在div的底部，并且它需要位于顶部。

下面我把我的HTML和CSS代码，以便您更容易看到我在做什么。

.curve {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270' style='transform: translateY(-5px)'><path d='M-314,267 C105,364 400,100 812,279' fill='none' stroke='#53DD6C' stroke-width='120' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
}

<div class="curve">
  <div class="beforeFooter">
    <div id="blankGTitle">
      <h2>Impacting lives.</h2>
    </div>

    <div id="blankGText">
      <h3>Create your event and make a difference.</h3>
    </div>

    <div id="buttono4">
      <nuxt-link to="/create-event">
        <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" />
      </nuxt-link>
    </div>

    <div id="blankGText2">
      <nuxt-link to="/organiser" id="blankGText2" class="wText">
        <p class="underline">Tell me more</p>
      </nuxt-link>
    </div>
  </div>
</div>

css

svg

vue.js

background-image

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-04 19:50:38

有什么原因让你把它包含在background-image中吗？您可以尝试将其从背景图像移到超文本标记语言中，然后使用CSS position: absolute将其设置为背景。

我稍微修改了一下您的示例，以包含我的想法。如果这不是你想要的，请告诉我，也许我可以进一步帮助你？

.curve {
  position: relative;
}

.curve svg {
  position: absolute;
  z-index: -3;
  bottom: 0;
}

.curve svg path {
  fill: none;
  stroke: #53DD6C;
  stroke-width: 120;
  stroke-linecap: round;
}

<div class="curve">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270'> <path d='M-314,267 C105,364 400,100 812,279'/> </svg>
  <div class="beforeFooter">
    <div id="blankGTitle">
      <h2>Impacting lives.</h2>
    </div>

    <div id="blankGText">
      <h3>Create your event and make a difference.</h3>
    </div>

    <div id="buttono4">
      <nuxt-link to="/create-event">
        <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" />
      </nuxt-link>
    </div>

    <div id="blankGText2">
      <nuxt-link to="/organiser" id="blankGText2" class="wText">
        <p class="underline">Tell me more</p>
      </nuxt-link>
    </div>
  </div>
</div>

或者，如果你想让它在顶部，你可以像这样旋转它：

.curve {
  position: relative;
}

.curve svg {
  position: absolute;
  z-index: -3;
  transform: rotate(180deg);
  top: 0;
}

.curve svg path {
  fill: none;
  stroke: #53DD6C;
  stroke-width: 120;
  stroke-linecap: round;
}

<div class="curve">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270'> <path d='M-314,267 C105,364 400,100 812,279'/> </svg>
  <div class="beforeFooter">
    <div id="blankGTitle">
      <h2>Impacting lives.</h2>
    </div>

    <div id="blankGText">
      <h3>Create your event and make a difference.</h3>
    </div>

    <div id="buttono4">
      <nuxt-link to="/create-event">
        <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" />
      </nuxt-link>
    </div>

    <div id="blankGText2">
      <nuxt-link to="/organiser" id="blankGText2" class="wText">
        <p class="underline">Tell me more</p>
      </nuxt-link>
    </div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2019-03-04 20:22:04

我把十六进制的颜色改为rgb，firefox has issues with hex colours for inline svg。它用十六进制在Chrome上正确地为我显示。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SVG</title>
    <style>
        .curve {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270' style='transform: translateY(-5px)'><path d='M-314,267 C105,364 400,100 812,279' fill='none' stroke='rgb(83,221,108)' stroke-width='120' stroke-linecap='round' /></svg>");
            background-repeat: no-repeat;
            }
    </style>
</head>

<main>
    <div class="curve">
        <div class="beforeFooter">
            <div id="blankGTitle">
                <h2>Impacting lives.</h2>
            </div>

            <div id="blankGText">
                <h3>Create your event and make a difference.</h3>
            </div>

            <div id="buttono4">
                <nuxt-link to="/create-event">
                    <buttons-vue text="create my event"
                        type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" ></buttons-vue>
                </nuxt-link>
            </div>

            <div id="blankGText2_">
                <nuxt-link to="/organiser" id="blankGText2" class="wText">
                    <p class="underline">Tell me more</p>
                </nuxt-link>
            </div>
        </div>
    </div>
</main>

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54982161

复制

相似问题

问css中的内联svg隐藏在div后面
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css中的内联svg隐藏在div后面EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css中的内联svg隐藏在div后面
EN