英文:
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.
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 -->
{
color: white;
text-align: center;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url(./color-morph.svg);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background: rgba(255, 255, 255, .1);
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
border-bottom: 2px solid rgba(255, 255, 255, .2);
}
.navbar a {
font-size: 18px;
text-decoration: none;
margin-left: 35px;
transition: .3s;
}
.navbar a:hover {
color: black;
-webkit-text-stroke: 1px white;
}
.container {
display: inline-block;
margin: 0 auto;
padding-top: 15%;
}
.text {
font-size: 30px;
font-weight: 900;
letter-spacing: 5px;
border-right: 5px solid;
width: 100%;
white-space: nowrap;
overflow: hidden;
animation:
typing 2s steps(17),
cursor .4s step-end infinite alternate;
}
/* cursor blinking effect */
@keyframes cursor {
50% {
border-color: transparent;
}
}
/* Typewriter effect */
@keyframes typing {
from {
width: 0
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<a href="#" class="logo">Matt</a>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Projects</a>
</nav>
</header>
<div class="container">
<p class="text">Hello, Matt Here.</p>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
请查看以下翻译内容：
"你必须说图像不会重复出现，并且覆盖整个屏幕
尝试这个：（已更新）
body {
background-image: url(./color-morph.svg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
```"
<details>
<summary>英文:</summary>
You must say that the image does not repeat itself and that it covers the entire screen
Try this : (updated)
body {
background-image: url(./color-morph.svg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论