首先,感谢您阅读这篇文章。
我想知道是否存在一种方法来创建某种3d网站背景,例如从SVG文件和一些CSS代码?更准确地说,是否有可能将SVG背景的某些层设置为html body元素的前面?由于不可能在SVG文件中使用z-index,我想知道是否存在解决方案来实现这一点。
给你一个具体的例子,我真的很感激在SEO顾问网站上这样做。对于这个特定的示例,我如何强制云(在背景图像的底部)在前景中,以便文本和每个body元素出现在云(包括侧边栏)的后面?
插图:当前显示与期望显示
指出(1)目前格式为jpg (&webp),因为我遇到了macOS设备和SVG背景的兼容性问题。此外,我不确定使用SVG作为网站背景是一个好主意。
(2)我最初试图将云作为一个单独的图像添加到特定的div中,但后来我不知道如何应用与背景img相同的响应设置(由我使用的主题设置)。
如果您有任何建议或想法,我将非常感谢。
谢谢。:)
您是对的,SVG元素不能使用z-index来定位,但是SVG元素本身可以被样式化/排序,以便它覆盖HTML。
svg {
position: fixed;
width: 50%;
bottom: 0;
right: 0;
}
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros in cursus turpis massa tincidunt. Mi sit amet mauris commodo quis imperdiet. Felis donec et odio pellentesque. Leo urna molestie at elementum eu facilisis. Pretium aenean pharetra magna ac placerat. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Nunc vel risus commodo viverra maecenas. Volutpat consequat mauris nunc congue nisi. Sit amet aliquam id diam maecenas. Nunc sed blandit libero volutpat sed cras. In est ante in nibh mauris cursus mattis molestie a. Quis lectus nulla at volutpat diam ut venenatis tellus in. Ut venenatis tellus in metus. Diam donec adipiscing tristique risus nec. Tellus at urna condimentum mattis pellentesque id. Purus in mollis nunc sed id semper risus in.</p>
<p>Interdum velit laoreet id donec ultrices. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Eu facilisis sed odio morbi quis commodo. Et tortor at risus viverra adipiscing at. Gravida neque convallis a cras semper. Auctor urna nunc id cursus metus aliquam eleifend mi. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Mi proin sed libero enim sed faucibus turpis. Fermentum leo vel orci porta non pulvinar neque. Varius sit amet mattis vulputate enim nulla aliquet. Semper eget duis at tellus at urna condimentum mattis. Viverra accumsan in nisl nisi scelerisque eu. Malesuada bibendum arcu vitae elementum. Lacinia quis vel eros donec ac. Turpis tincidunt id aliquet risus feugiat in. Non consectetur a erat nam at lectus urna duis convallis. Risus sed vulputate odio ut enim blandit. Vitae elementum curabitur vitae nunc sed velit. Faucibus nisl tincidunt eget nullam non nisi. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet.</p>
<section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3">
<circle r="1" cx="3" cy="3" fill="blue"/>
<circle r=".5" cx="1.5" cy="3" fill="blue"/>
</svg>