英文:
Why is my linear-background acting like this?
问题
我只是简单地写了一行代码来设置我的背景，但它不起作用。我的背景应该是一个从左上角到右下角的线性渐变。它确实实现了这一点，但在红色和蓝色之间有一行行的红色和蓝色。我使用了红色和蓝色两种颜色。有人能帮帮我吗？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div></div>
</body>
</html>
CSS
body {
background-image: linear-gradient(to top right, red, blue);
}
英文:
I literally wrote one line of code to style my background and it doesn't work. My background is supposed to be a liner-gradient going from the top left to the bottom right. It does do this but has rows of red in blue in between each other going down. enter image description hereI used the colors red and blue. Can someone please help me?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div></div>
</body>
</html>
CSS
body {
background-image: linear-gradient(to top right, red, blue);
}
答案1
得分: 0
以下是解决方案：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
body {
background: linear-gradient(to top right, red, blue);
min-height: 100vh;
color: #fff;
}
<!-- 语言：lang-html -->
<div>线性渐变背景</div>
<!-- 结束代码片段 -->
英文:
Here is the solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background: linear-gradient(to top right, red, blue);
min-height: 100vh;
color: #fff;
}
<!-- language: lang-html -->
<div>Linear Gradient Background</div>
<!-- end snippet -->
答案2
得分: 0
因为主体的默认高度为零，而你将渐变效果设置为从顶部开始，所以会出现这种闪烁效果，因为如Haworth在回复中所说，它会重复。
HTML元素会采用主体的背景，如果它没有为自己设置背景，重复是背景重复的默认设置。
如果你将方向设置为仅右侧，它也会重复，但不会产生边框闪烁的感觉，如果你想知道没有重复的情况下会是什么样子，你可以将CSS代码设置为这样：
body {
background-repeat: no-repeat !important;
background-image: linear-gradient(to top right, red, blue);
}
这将使渐变效果仅发生一次，达到预期的效果。
解决这个问题的方法是给屏幕设置一个高度：
body {
min-height: 100vh;
background-image: linear-gradient(to top right, red, blue);
/* 不再需要 background-repeat: no-repeat !important; */
}
这应该可以正常工作。
英文:
because the default height of the body is zero and you're making the gradient go to the top it gives this glitching effect because it's repeating as A Haworth said in the reply
> the html element picks up the background of the body if it doesn't have one set for itself and repeat is the default setting for background-repeat.
if you set the direction to Right only it will also repeat but it will not give the border glitch feeling , if you want to know how it would look like without the repeat you can make the CSS code like this
body {
background-repeat: no-repeat !important;
background-image: linear-gradient(to top right, red, blue);
}
it will give the expected behavior with the gradient happening only once.
how to solve this is by giving the screen a height
body {
min-height: 100vh;
background-image: linear-gradient(to top right, red, blue);
/* background-repeat: no-repeat !important; this is not
needed now */ */
}
this should work just fine
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论