我需要找出为什么我的背景在我的 CSS 中重复，即使在使用不重复之后也是如此。我试图避免使用背景覆盖，因为它会扭曲图像。这只是发生在 Chrome 上。
https://natalyhelps.github.io/projects/inspiredquotes/inspiredquotes.html
我尝试添加不重复。我尝试将我的代码通过 chatgpt。我尝试检查图像 URL。我尝试在不同的浏览器中访问。我尝试重新提交不同的代码库。
body {
background: url("http://natalyhelps.github.io/lotus.png");
color: #5A5A5A;
background-repeat: no-repeat;
background-position: top;
}
#quotecontainer {
background-color: rgba(255, 255, 255, 0.5);
/* White with 50% opacity */
height: auto;
padding: 2%;
margin-right: 10%;
}
#quote {
letter-spacing: 1.7px;
font-family: cambria;
height: auto;
width: 50%;
text-align: center;
margin: 1%;
font-size: 1.4em;
line-height: 1.6em;
background-color: rgba(0, 0, 0, 0.1);
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
#btn {
margin: 50px auto;
font-family: verdana;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
/* Add box shadow when button is pressed */
color: #5A5A5A;
border: solid 1px rgba(245, 93, 180, .9);
/* Equivalent to #FF69B4 */
;
;
cursor: pointer;
font-size: 1em;
padding: 15px;
border-radius: 25px;
cursor: pointer;
letter-spacing: 2px;
position: relative;
overflow: hidden;
background-color: rgba(248, 96, 180, .9);
/* Equivalent to #FF69B4 */
}
#btn:hover {
background-color: rgba(245, 93, 180, 1);
/* Equivalent to #FF69B4 */
color: #5A5A5A;
font-size: .9em;
letter-spacing: 2.2px;
#output {}<div id='quotecontainer'>
<div id='quote'>
<button id='btn'>
Press Me</button>
<div id='output'>Press the button for wisdom</div>
</div>
</div>
code
<body>
<div id="container">
<div id='quotecontainer'>
<div id='quote'>
<button id='btn'>
Press Me</button>
<div id='output'>Press the button for wisdom</div>
</div>
</div>
</div>
<script src="inspiredquotes.js"></script>
CSS code
#container {
background: url("http://natalyhelps.github.io/lotus.png");
/* color: #5A5A5A; */
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
background-attachment: fixed;
left: 0;
}