这是我的
html {}
body {
background-image: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
.top {
background-color: Black;
overflow: hidden;
color: White;
border: solid 5px Black;
border-radius: 0 0 25px 25px;
padding: 0 25px 0 25px
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
代码
它确实显示背景颜色和顶部div标签,但未显示背景图像。我在html和css上还很新,所以也请解释一下
答案 0 :(得分:1)
html{
}
body{
background: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
.top{
background-color: Black;
overflow: hidden;
color: White;
border: solid 5px Black;
border-radius: 0 0 25px 25px;
padding: 0 25px 0 25px
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
答案 1 :(得分:0)
您可以尝试使用
background-size: cover;
它将拉伸图像以覆盖页面,但是由于gif的分辨率与屏幕不同,因此看起来有点奇怪。
此外,不重复是原因,它根本不显示。没有它,它将显示,但彼此相邻显示几次。