CSS背景与多次重复的SVG

huangapple
go评论136阅读模式
英文:

CSS Background with svg duplicating multiple times

问题

I am trying to add a svg gradient background image to my website, however, When adding the SVG as a background it just seems to duplicate it multiple times randomly. I have never had this issue before when adding background images, not sure why it is not working now.

我正在尝试将SVG渐变背景图像添加到我的网站，但是，将SVG添加为背景时，它似乎会随机多次重复。在以前添加背景图像时从未遇到过这个问题，不确定为什么现在不起作用。

I have tried adding background no repeat on the line after. However this doesn't fix the issue.

我尝试在下一行添加"background no repeat"，但是这并没有解决问题。

英文:

I am trying to add a svg gradient background image to my website, however, When adding the SVG as a background it just seems to duplicate it multiple times randomly. I have never had this issue before when adding background images, not sure why it is not working now.
CSS背景与多次重复的SVG

I have tried adding background no repeat on the line after. However this doesn't fix the issue.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. {
  2.   color: white;
  3.   text-align: center;
  4.   box-sizing: border-box;
  5.   margin: 0;
  6.   padding: 0;
  7. }
  9. body {
  11.   background-image: url(./color-morph.svg);
  12. }
  14. .header {
  15.   position: fixed;
  16.   top: 0;
  17.   left: 0;
  18.   width: 100%;
  19.   padding: 20px 100px;
  20.   background: rgba(255, 255, 255, .1);
  21.   display: flex;
  22.   justify-content: space-between;
  23.   align-items: center;
  24.   backdrop-filter: blur(10px);
  25.   border-bottom: 2px solid rgba(255, 255, 255, .2);
  26. }
  28. .navbar a {
  29.   font-size: 18px;
  30.   text-decoration: none;
  31.   margin-left: 35px;
  32.   transition: .3s;
  33. }
  35. .navbar a:hover {
  36.   color: black;
  37.   -webkit-text-stroke: 1px white;
  38. }
  40. .container {
  41.   display: inline-block;
  42.   margin: 0 auto;
  43.   padding-top: 15%;
  44. }
  46. .text {
  47.   font-size: 30px;
  48.   font-weight: 900;
  49.   letter-spacing: 5px;
  50.   border-right: 5px solid;
  51.   width: 100%;
  52.   white-space: nowrap;
  53.   overflow: hidden;
  54.   animation:
  55.     typing 2s steps(17),
  56.     cursor .4s step-end infinite alternate;
  57. }
  59. /* cursor blinking effect */
  60. @keyframes cursor {
  61.   50% {
  62.     border-color: transparent;
  63.   }
  64. }
  66. /* Typewriter effect */
  67. @keyframes typing {
  68.   from {
  69.     width: 0
  70.   }
  71. }

<!-- language: lang-html -->

  1.  &lt;!DOCTYPE html&gt;
  2.  &lt;html lang=&quot;en&quot;&gt;
  4.    &lt;head&gt;
  5.      &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
  8.      &lt;title&gt;Website&lt;/title&gt;
  9.      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  10.    &lt;/head&gt;
  12.    &lt;body&gt;
  14.      &lt;header class=&quot;header&quot;&gt;
  15.        &lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Matt&lt;/a&gt;
  17.        &lt;nav class=&quot;navbar&quot;&gt;
  18.          &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  19.          &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
  20.          &lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
  21.          &lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;
  22.        &lt;/nav&gt;
  23.      &lt;/header&gt;
  26.      &lt;div class=&quot;container&quot;&gt;
  27.        &lt;p class=&quot;text&quot;&gt;Hello, Matt Here.&lt;/p&gt;
  28.      &lt;/div&gt;
  31.    &lt;/body&gt;
  33.  &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

请查看以下翻译内容：

"你必须说图像不会重复出现，并且覆盖整个屏幕

尝试这个：（已更新）

  1. body {
  2.     background-image: url(./color-morph.svg);
  3.     background-repeat: no-repeat;
  4.     background-size: cover;
  5.     background-attachment: fixed;
  6. }
  7. ```"
  9. <details>
  10. <summary>英文:</summary>
  12. You must say that the image does not repeat itself and that it covers the entire screen
  14. Try this : (updated)
  16.      body {
  17.           
  18.           background-image: url(./color-morph.svg);
  19.           background-repeat: no-repeat;
  20.           background-size: cover;
  21.           background-attachment: fixed;
  22.         }
  24. </details>

huangapple
  • 本文由 发表于 2023年5月15日 05:46:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76249811.html
  • css
  • html
  • javascript
  • svg
  • web
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定