网页背景图像
网页背景图像
提问于 2015-09-11 06:03:07
我在使用CSS应用背景图像方面有很大的困难。当我直接为HTML属性中的body标记应用背景图像时，它可以工作。但是当我对CSS做同样的事情时，它就不会了，这是我的CSS和HTML。
<!DOCTYPE html>
<!-- Start of HTML -->
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8" />
<meta name="description" content="Creating Web Applications" />
<meta name="keywords" content="party equipment" />
<meta name="author" content="Zaid Shakil" />
<!--CSS Style File Link -->
<link rel="stylesheet" href="styles/style.css" />
<!-- Title of the page -->
<title>Party Equipment</title>
</head>
<body id="homepage">
<!-- Header -->
<header>
<!-- Navigation bar -->
<nav>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="product.html" class="product">Product</a></li>
<li><a href="enquiry.html" class="enquiry">Enquiry</a></li>
<li><a href="about.html" class="about">About</a></li>
</ul>
</nav>
</header>
<img id="homepic" src="images/partyhome.png" alt="Party" />
<h1 class="hometitle">Welcome to Party Equipments Inc</h1>
<p id="homep"> Hi, We are your experts in party equipments. We are currently offering one product. Browse through our website and checkout our product page to know more about the equipment we are offering and get great deals. <br /> </p>
<div id="gallery">
<a href="http://www.bizclassifieds.com.au/sites/67/images/swfimage_3028_1.jpg"><img src="images/example1.jpg" width="500" height="375" alt="Example 1"></a><p>Reference: <a href="http://www.bizclassifieds.com.au/Childrens-Products-&-Services/Party-Equipment-Hire-Established-10-years.htm">Dancing Light</a><p>
<a href="http://g02.a.alicdn.com/kf/HTB1RbBSHVXXXXX4XVXXq6xXFXXXF/E27-6w-RGB-Led-Bulbs-Mini-Party-Light-Dance-Party-Lamps-Auto-Rotating-DJ-Stage-Disco.jpg"><img src="images/example4.jpg" width="500" height="375" alt="Example 1"></a><p>Reference: <a href="http://www.aliexpress.com/store/product/E27-3w-RGB-Led-Bulbs-Mini-Party-Light-Dance-Party-Lamps-Auto-Rotating-DJ-Stage-Disco/930043_1780846867.html">Dancing Light 2</a></p>
<a href="https://activedark.files.wordpress.com/2012/12/led_drinkglasses.jpg?w=700"><img src="images/example3.jpg" width="400" height="275" alt="Example 1"></a><p>Reference: <a href="http://activedark.com/2012/12/04/glowing-drinks-will-brighten-any-party/">Glowing Glass</a></p>
</div>
<hr />
<footer>
1. Logo: https://www.thepartybazaar.com/
<p id="footer">Copyright 2015 Designed by <a href="mailto:4962516@student.swin.edu.au"> Zaid Shakil </a></p>
</footer>
</body>
</html>CSS
/* Navigation Element */
/*h1 {
margin-top: 100px;
}
nav {
position: fixed;
float: none;
left: 50%;
margin-left: -300px;
}*/
nav ul {
margin: 0 auto;
padding: 0 auto;
text-align: center;
}
nav ul li {
display: inline;
list-style: none;
}
nav a {
text-decoration: none;
display: inline-block;
background-color:#343434;
width: 120px;
padding: 4px;
margin-right: -4px;
font-weight: bold;
color: white;
text-transform: uppercase;
text-align: center;
}
nav a:hover {
color: white;
background-color: #CF5300 ;
}
/* Homepage Header Image */
#homepic {
display: block;
margin: 0 auto;
}
h1.hometitle {
text-align: center;
color: black;
}
#homep {
text-align: center;
font-size: 20px;
}
footer a:hover {
color: white;
}
#gallery {
display: block;
margin: 0 auto;
text-align: center;
}
#name {
text-align: center;
font-weight: bold;
font-size: 200%;
}
#number {
text-align: right;
font-family: Arial, sans-serif;
font-size: 100%;
}
#course {
color: rgb(180, 49, 0);
font-size: 100%;
font-family: Verdana;
}
#myphoto {
float: none;
border: 20px groove #333;
}
footer {
clear: both;
}
.enquiryp {
font-family: Arial, Verdana, sans-serif;
font-size: 30px;
}
aside {
border: 2px inset red;
border-radius: 100px;
margin: 0.5em;
padding: 0.5em;
width: 30%;
float:left;
text-align: center;
clear: both;
}
h1, h2, h3 {
color: red;
}
article { min-width:30em;}
#dancinglight2 {
float:left;
}
#dancinglight{
float: right;
}
#glowingglass
{
float: right;
}
/*
img {float:left; clear: both;
}*/
.features {
float: right;
}
.time {
width: 100;
height: 100;
}
.row {
width: 100;
height: 100;
}
#wed1 {
background-color: #00ff00;
}
#wed2 {
background-color: #CB8CFF;
}
#friday {
background-color: #BABABA;
}
#tues {
background-color: #4DB8FF;
}
#thu {
background-color: #FFEE8C;
}
#thu2 {
background-color: #FF8CD7;
}
#homepage {
background: url("party.jpg");
}
/*body:before, body:after {
content: "";
position: fixed;
background-image: url("party.jpg");;
left: 0;
right: 0;
height: 10px;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
body {
border-left: 100px solid ;
border-right: 100px solid;
}*/回答 3
Stack Overflow用户
发布于 2015-09-11 06:07:44
为我工作，确保找到了图像css urls可以与<img src="">不同，路径是相对于css文件设置的。
如果你的结构是这样的
index.html
-css
--style.css
-img
--party.jpg那么在您的css中，url必须是
background: url("/img/party.jpg");
或
background: url("../img/party.jpg");
以下是一些信息，很高兴知道
Stack Overflow用户
发布于 2015-09-11 07:22:55
另一种解决方案是将图像上传到像印古尔这样的站点，然后用直接链接替换party.jpg (链接中具有图像文件扩展名的链接)。
Stack Overflow用户
发布于 2015-09-11 07:58:19
首先，确保您的.jpg与.css文件位于同一个文件夹中。如果没有，则将其路径重定向到.css文件，如下所示
{
background-image: url('path/to/bg.jpg');
}或{背景图像:url(‘./path/to/bg.jpg’)；如果这些文件位于不同的文件夹*/ }中，则为/*
但这并不是你需要设定的最好的结果
{
background-image: url('path/to/bg.jpg');
background-size: value; /* ('contain, cover or auto or values') */
background-position: value; /* center would be the best value choice */
background-repeat: value; /* type of repeat */}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32516545
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号