设置完整的矩形背景图像

Question

请帮帮我！我怎样才能上传完整的矩形背景图片？我的错误在哪里或必须添加什么？这是我的形象。请帮忙。大家好！请帮帮我！我怎样才能上传完整的矩形背景图片？我的错误在哪里或必须添加什么？这是我的形象。请帮忙。

body {
 font: 1.5em Arial;
}
.container1 {

 background-image: url(prague3.jpeg);
 margin:
 width:
 background-size:
}
.top {
 opacity: 0.8;
 font-size:65px;
 font-family: Courier new;
 text-align: center;
 background: #EBA23C;
 width: 100%;
}
ul {
 float: left;
 padding: 0px;
 list-style: none;
}
ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: #F05050;
 text-align: center;
 font-size: 20px;
 line-height: 40px;
 margin-right: 2px;
}
ul li a {
 text-decoration: none;
 color: white;
 display: block;
}
ul li a:hover {
 position: relative;
 z-index: 1;
 background-color: #C6AEF0;
}
ul li:hover ul {
 position: relative;
 z-index: 1;
}
ul li ul li{
 opacity: 0.9;
 display: none;
}
ul li:hover ul li {
 display:block;
}

.container2 {
 background-color: #ccc;
 width: 650px;
 margin-left: 500px;
 margin-top: 50px;
 font-size: 50px;
 font-family: Courier New;
 opacity: 0.7;
 text-align: center;
 border: dashed;
}
.container3 {
background-color: #ccc;
 width: 650px;
 margin-left: 500px;
 margin-top: 50px;
 font-size: 50px;
 font-family: Courier New;
 opacity: 0.7;
 text-align: center;
 border: dashed;
}

<html>
<meta charset="utf-8">
<title>Home page</title>
<link rel="stylesheet" href="style.css">
<div class="container1">
<div class="top">Study in Czech Republic</div>
<ul>
<li><a>Home</a></li>
<li><a>News</a></li>
<li><a>Czech Republic</a>
       <ul>
<li><a>Facts and figures</a></li>
<li><a>Area</a></li>
<li><a>Climate</a></li>
       </ul>
    </li>
<li><a>Study</a>
       <ul>
<li><a>How to apply</a></li>
<li><a>Programmes</a></li>
<li><a>Scholarships</a></li>
<li><a>Tuition fees</a></li>
       </ul>
    </li>
<li><a>Living</a>
       <ul>
<li><a>Arrival</a></li>
<li><a>Living costs</a></li>
<li><a>Work</a></li>
       </ul>
    </li>
    <li><a>Contact</a></li>
</ul><br><br>
<div class="container2">
EXPERIENCE STUDYING IN THE HEART OF EUROPE
</div><br><br><br<br><br><br><br><br><br><br>
<div class="container3">gdfgdfgdfg</div>


</html>

Answer 1

将 url 添加到 background-image 属性到 css 中的 body 并将 background-size 设置为覆盖并定位中心以使其适合它。

body {
 font: 1.5em Arial;
    background-image: url(https://i.stack.imgur.com/iWvFK.jpg);
    background-position: center;
    background-size: cover;
}
.container1 {

 background-image: url(prague3.jpeg);
 margin:
 width:
 background-size:
}
.top {
 opacity: 0.8;
 font-size:65px;
 font-family: Courier new;
 text-align: center;
 background: #EBA23C;
 width: 100%;
}
ul {
 float: left;
 padding: 0px;
 list-style: none;
}
ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: #F05050;
 text-align: center;
 font-size: 20px;
 line-height: 40px;
 margin-right: 2px;
}
ul li a {
 text-decoration: none;
 color: white;
 display: block;
}
ul li a:hover {
 position: relative;
 z-index: 1;
 background-color: #C6AEF0;
}
ul li:hover ul {
 position: relative;
 z-index: 1;
}
ul li ul li{
 opacity: 0.9;
 display: none;
}
ul li:hover ul li {
 display:block;
}

.container2 {
 background-color: #ccc;
 width: 650px;
 margin-left: 500px;
 margin-top: 50px;
 font-size: 50px;
 font-family: Courier New;
 opacity: 0.7;
 text-align: center;
 border: dashed;
}
.container3 {
background-color: #ccc;
 width: 650px;
 margin-left: 500px;
 margin-top: 50px;
 font-size: 50px;
 font-family: Courier New;
 opacity: 0.7;
 text-align: center;
 border: dashed;
}

<html>
<meta charset="utf-8">
<title>Home page</title>
<link rel="stylesheet" href="style.css">
<div class="container1">
<div class="top">Study in Czech Republic</div>
<ul>
<li><a>Home</a></li>
<li><a>News</a></li>
<li><a>Czech Republic</a>
       <ul>
<li><a>Facts and figures</a></li>
<li><a>Area</a></li>
<li><a>Climate</a></li>
       </ul>
    </li>
<li><a>Study</a>
       <ul>
<li><a>How to apply</a></li>
<li><a>Programmes</a></li>
<li><a>Scholarships</a></li>
<li><a>Tuition fees</a></li>
       </ul>
    </li>
<li><a>Living</a>
       <ul>
<li><a>Arrival</a></li>
<li><a>Living costs</a></li>
<li><a>Work</a></li>
       </ul>
    </li>
    <li><a>Contact</a></li>
</ul><br><br>
<div class="container2">
EXPERIENCE STUDYING IN THE HEART OF EUROPE
</div><br><br><br<br><br><br><br><br><br><br>
<div class="container3">gdfgdfgdfg</div>


</html>

Answer 2

我不知道这是否是你的问题，但看看你的 css 这部分 :

.container1 {
 background-image: url(prague3.jpeg);
 margin:
 width:
 background-size:
}

您必须 link 您的图像正确并用 ; 关闭每个样式。即使它们是空的。就像我的例子：

.container1 {
 background-image: url('https://i.stack.imgur.com/iWvFK.jpg');
 margin:;
 width:;
 background-size:;
}

如果你把它们留空，你也可以删除它们。我回答你的问题了吗？

Answer 3

您需要将正确的 url 添加到您希望背景图像覆盖的容器中，而不是为容器提供所需的高度和宽度。

body {
 font: 1.5em Arial;
        margin: 0;
}

.container1 {

        background-image: url(https://i.stack.imgur.com/iWvFK.jpg);
        background-position: center;
        background-size: cover;
        height: 50vh;
 width: 100%;
}
.top {
 opacity: 0.8;
 font-size:65px;
 font-family: Courier new;
 text-align: center;
 background: #EBA23C;
 width: 100%;
}
ul {
 float: left;
 padding: 0px;
 list-style: none;
}
ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: #F05050;
 text-align: center;
 font-size: 20px;
 line-height: 40px;
 margin-right: 2px;
}
ul li a {
 text-decoration: none;
 color: white;
 display: block;
}
ul li a:hover {
 position: relative;
 z-index: 1;
 background-color: #C6AEF0;
}
ul li:hover ul {
 position: relative;
 z-index: 1;
}
ul li ul li{
 opacity: 0.9;
 display: none;
}
ul li:hover ul li {
 display:block;
}

.container2 {
 background-color: #ccc;
 width: 650px;
 margin-left: 500px;
 margin-top: 50px;
 font-size: 50px;
 font-family: Courier New;
 opacity: 0.7;
 text-align: center;
 border: dashed;
}
.container3 {
background-color: #ccc;
 width: 650px;
 margin-left: 500px;
 margin-top: 50px;
 font-size: 50px;
 font-family: Courier New;
 opacity: 0.7;
 text-align: center;
 border: dashed;
}

<html>
<meta charset="utf-8">
<title>Home page</title>
<link rel="stylesheet" href="style.css">
<div class="container1">
<div class="top">Study in Czech Republic</div>
<ul>
<li><a>Home</a></li>
<li><a>News</a></li>
<li><a>Czech Republic</a>
       <ul>
<li><a>Facts and figures</a></li>
<li><a>Area</a></li>
<li><a>Climate</a></li>
       </ul>
    </li>
<li><a>Study</a>
       <ul>
<li><a>How to apply</a></li>
<li><a>Programmes</a></li>
<li><a>Scholarships</a></li>
<li><a>Tuition fees</a></li>
       </ul>
    </li>
<li><a>Living</a>
       <ul>
<li><a>Arrival</a></li>
<li><a>Living costs</a></li>
<li><a>Work</a></li>
       </ul>
    </li>
    <li><a>Contact</a></li>
</ul><br><br>
<div class="container2">
EXPERIENCE STUDYING IN THE HEART OF EUROPE
</div><br><br><br<br><br><br><br><br><br><br>
<div class="container3">gdfgdfgdfg</div>


</html>

设置完整的矩形背景图像

Setting full rectangle background image

html

css

background-image