设置完整的矩形背景图像

时间：2017-12-19 09:59:30

标签： html css css3 background-image

请帮帮我！我如何上传完整的矩形背景图像？我的错误在哪里或者必须添加什么？这是我的形象。请帮忙。大家好！请帮帮我！我如何上传完整的矩形背景图像？我的错误在哪里或者必须添加什么？这是我的形象。请帮忙。

enter image description here

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

将背景图像属性的url添加到css中的body，并将background-size设置为覆盖和定位中心，使其适合它。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我不知道这是不是你的问题，但请看看你的css：

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

你必须正确地链接你的图像并用一个;即使它们是空的。像我的例子：

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

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

答案 2 :(得分：0)

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

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>

相关问题
最新问题