为什么我的CSS底部的背景图像被截断了?

时间:2019-01-03 16:51:39

标签: html css

我正在尝试创建一个页面,其中背景图像覆盖了该页面,而没有重复或扩展到窗口之外。现在它在底部被切断了。

我尝试使用视口的大小,百分比和覆盖率,但它会重复或被截断,并且将近一半的窗口完全变成白色。

html, body {
    margin:0; 
    padding:0; 
    width:100%; 
    height:99vmin; 
    overflow:hidden;
}
body {
    font-family:verdana, arial, sans-serif; 
    font-size:76%;
}
#background {
    position:absolute; 
    z-index:1; 
    width:100%; 
    height:100%;
    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 
    background-size: cover;
}
#quotes {
    text-decoration: none;
    padding-top: 30%;
    padding-right: 20%;
    padding-left: 20%;
    margin: auto;
    position: absolute;
    text-align: center;
    color: beige;
    font-size: 36px;
}
.button {
    position: absolute;
    z-index: 1000;
    margin: 50%;
    text-align: center;
}
<body>
    <div id="background">
        <div id="quotes">
        <p>&#8220;<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.&#8221;</p>
        <p>&#8220;Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.&#8221;</p>
        <p>&#8220;We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.&#8221;</p>
    </div>
        </div>
    <button class="button">Thus Spoke Nietzsche</button>
<script src="randomize.js"></script>
</body>

2 个答案:

答案 0 :(得分:1)

尝试string sql = "SELECT database_id FROM sys.databases WHERE Name = '"+yuy+"'"; SqlConnection con = new SqlConnection(@"" + singleconn.Replace(@"\\", @"\")); SqlCommand command = new SqlCommand(sql, con); con.Open(); object resultObj = command.ExecuteScalar(); con.Close(); if (resultObj == null) { string sql2 = "Restore Database " + yuy + " FROM DISK = '" + @"\" + localdir.Replace(@"\\", @"\") + @"\" + FileName + "'"; SqlCommand command2 = new SqlCommand(sql2, con); con.Open(); command2.ExecuteNonQuery(); con.Close(); con.Dispose(); File.Delete(@"\" + localdir.Replace(@"\\", @"\") + @"\" + FileName); MessageBox.Show("Database recovered successfully!"); } else { Random rnd = new Random(); int card = rnd.Next(52); MessageBox.Show("There is already a database under this name; renaming the DB to " + yuy + card.ToString()); string sql2 = "Restore Database " + yuy + card.ToString() + " FROM DISK = '" + @"\" + localdir.Replace(@"\\", @"\") + @"\" + FileName + "'"; SqlCommand command2 = new SqlCommand(sql2, con); con.Open(); command2.ExecuteNonQuery(); con.Close(); con.Dispose(); File.Delete(@"\" + localdir.Replace(@"\\", @"\") + @"\" + FileName); MessageBox.Show("Database Recovered Successfully!"); }

img
#background{
  position:absolute; 
  z-index:1; 
  width:100%; 
  height:100%;
}

答案 1 :(得分:-1)

如果要将完整图像用作背景,请尝试-background-size:100%100%;或背景大小:100%;