我正在尝试为医生办公室创建一个网站，我希望它看起来尽可能专业，但我的背景图像(渐变图像)会停止并且不会重复。我尝试使用 repeat-y、repeat-x 并将其保留，因此它会重复两次，但没有任何效果。
代码:
<div class="top">
<body style="text-align: center; ">
</body>
</div>
<div class="left">
<p> Links </p>
<section class="gradient">
<button>sdf</button>
<button>sdf</button>
<button>sdf</button>
<button>sdf</button>
<button>sdf</button>
</section>
sdfsdfs
<img src="file://../Images/Background.jpg" alt="Smiley face" height="42" width="42">
</div>
<div class="main">
<style>
img{
position: absolute;
margin: auto;
top: 4000px;
bottom: 1000px;;
left: 0;
}
.top {
position: absolute;
left:0; right:0;
}
.left {
background-image: url("file:/C:/Users/cody/Desktop/Website/Images/Background3.jpg");
position:absolute;
left: 0; top: 300px; bottom: 0;
width: 300px; height: auto;
}
.main {
position: absolute;
left:300px; top:300px; right:0; bottom:0;
}
.left {
}
.main {
background: url("file:/C:/Users/cody/Desktop/Website/Images/Background.jpg");
}
section.gradient button {
color: #fff;
text-shadow: -2px 2px #0d4f99;
background-color: #005fb3;
background-image: linear-gradient(top, #0d5799, #0d4f99);
box-shadow: inset 0 0 0 1px #13457d;
border: none;
border-radius: 8px;
}
section.gradient button:hover, section.gradient button.hover {
box-shadow: inset 0 0 0 1px #13457d,0 5px 15px #152739;
}
section.gradient button:active, section.gradient button.active {
box-shadow: inset 0 0 0 1px #13457d,inset 0 5px 30px #152739;
}
button {
display: inline-block;
margin: 1px 1px 1px 1px;
padding: 5px 5px 5px 6px;
font-size: 25px;
font-family: "Bitter",serif;
line-height: 0.8;
appearance: none;
box-shadow: none;
border-radius: 0;
height : 1.2em;
width: 100%;
}
button:focus {
outline: none
}
p.sansserif {
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
color: black;
}
</style>
</div>
此外，我知道我可以设置一个高度，但我宁愿在添加对象时动态更改它。
最佳答案
对于重复背景图像而言，最重要的是确保具有 background-image css 属性的 div 大于背景图像本身的大小。你检查过这是否属实？
如果您的背景图像 url 正在获取一个非常大的文件(以像素计大于您的 div 的大小)，那么您可以尝试将 background-size 属性设置为小于该 div 的大小。根据提供的代码，我真的不能告诉你的图像文件的大小，但也许试试看？希望对您有所帮助。
关于css - 背景停止，我尝试使用重复和我发现的任何东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32344466/