我在CSS中使用内联SVG,以便可以看到图像。但是,它不起作用,因为该图像隐藏在整个div的后面,即使我添加了z-index也无法看到该图像。另外,图片位于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>
答案 0 :(得分:1)
您是否有理由在background-image
中加入它?您可以尝试将其从背景图像移到HTML中,然后使用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 :(得分:-2)
我将十六进制颜色更改为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>