个人中心
gpt4 book ai didi

css - 网页的背景图片

转载 作者：太空宇宙 更新时间：2023-11-04 02:53:59 25 4
gpt4 key购买 nike

我在使用 CSS 应用背景图片时遇到了很大的麻烦。当我直接在 HTML style 属性中为 body 标记应用背景图像时，它起作用了。但是当我用 CSS 做同样的事情时，它不会。这是我的 CSS 和 HTML。

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-&amp;-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;  
}*/

最佳答案

为我工作确保找到图像 css url 可以不同于 <img src="">路径是相对于css文件设置的

如果你的结构是这样的

index.html
-css
--style.css
-img
--party.jpg

然后在你的 css 中 url 必须是

background: url("/img/party.jpg");

或

background: url("../img/party.jpg");

这里有一些值得知道的信息

Absolute vs relative URLs

关于css - 网页的背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32516545/

25 4 0
文章推荐： c - Richedit 改变选区颜色
文章推荐： python - 如何根据 Python 中输入列表的索引附加多处理池的结果？
文章推荐： c - 从scanf读取不同的输入——C语言
文章推荐： python - 如何运行特定的 scipy 测试
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com