堆棧內存溢出
  簡體   English   中英

我的背景圖像未顯示，並且在我的 html/css 中顯示為灰色。 請幫助。 我將我的 css 和 html 合並在一張紙上

[英]my background image is not showing and appears grey in my html/css. kindly help. i combine my css and html in one sheet

 原文  2021-12-24 12:54:52  8   1    html/ css/ image/ background-image/ html-helper

問題描述

<html>
<head>
<style>
{
    margin:auto;
    padding:auto;
}
.top{
    width:100%;
    background-color:#008000 !important;
    border-bottom:2px solid #008000;
}
.top div{
    width:1200px;
    color:#fff;
    background-color:#800000 !important;
    font-family:calibri;
    padding:10px;
    text-align:right;
}

.logo{
    width:100%;
    background-color:;
    border-bottom:2px solid #f0f0f0;
}
.logo div{
    width:1200px;
    background-color:;
    font-family:calibri;
    padding:10px;
    text-align:left;
}
.logo div table a{
    padding:10px;
    text-decoration:none;
    color:gray;
}
.logo div table a:hover{
    color:#428bca;
    border-bottom:2px solid gray;
}

.middle{
    width:100%;
    border-bottom:2px solid #f0f0f0;
}
.middle div{
    width:1200px;
    height:400px;
    font-family:calibri;
}
.middle div p{
    width:1000px;
    font-weight:bold;
    height:300px;
    color:#fff;
    opacity:0.2;
    font-size:50px;
    background-color:#000;
}

.bottom{
    width:100%;
    background-color:;
    border-bottom:2px solid #f0f0f0;
}
.bottom div{
    width:1200px;
    color:#fff;
    background-color:;
    font-family:calibri;
    text-align:right;
}
.bottom div table{
    padding-top:30px;
    width:1100px;
    text-align:justify;
    color:gray;
    font-size:20px;
}

.bottom_up{
    width:100%;
    background-color:;
    border-bottom:2px solid #f0f0f0;
}
.bottom_up div{
    padding-top:20px;
    width:1200px;
    text-align:center;
    background-color:;
    font-family:forte;
    font-size:30px;
    padding-bottom:20px;
}
.bottom_up div table{
    padding-top:30px;
    font-size:30px;
    width:1100px;
    text-align:center;
    background-color:;
    font-family:calibri;
    
}

input[type="text"]{
    padding:12px;
    width:250px;
}
select{
    padding:12px;
    width:250px;
}
textarea{
    padding:50px;
    width:550px;
}
button{
    width:550px;
    padding:10px;
    color:#fff;
    font-size:20px;
    background-color:#2FA5EB !important;
}


.nav_down{
    width:100%;
    background-color:#008000 !important;
    border-bottom:2px solid #f0f0f0;
}
.nav_down div{
    width:1200px;
    color:#fff;
    background-color:#800000;
    font-family:calibri;
    padding:10px;
    text-align:left;
}
</style>

    <title> Longclaw Expeditions </title>
    
    
</head>
<body>
    
    <div class="top">
        <div>
         Contact Us +254712345678 | info@longclawexpeditions.com 
        </div>
    </div>
    
    <div class="logo">
        <div>
            <table>
                <tr>
                    <td width="600px" style="font-size:50px;font-family:Arial Black;"> <font color="#008000"> LONGCLAW  </font><font color="#800000
"> EXPEDITIONS</font> </td>
                    <td> <br> <br>
                        <font size="4px"> 
                            <a href="index.html">HOME</a> 
                            <a href="about.html">ABOUT US</a>  
                            <a href="destination.html">DESTINATION</a>
                            <a href="blogs.html">BLOGS</a> 
                            <a href="contact.html">CONTACT US</a>
                        </font>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    <div class="middle">
        <div style="background-image:src('Users\brian\Documents\Website KCITI\shoebill-uganda.jpg');">
        <p>
            <br> <br>
                    Tours and Travel  <br>
            <font size="5px"> The Wildlife and Birding Gurus </font>
        </p> 
        </div>
    </div>
    
    <div class="bottom">
        <div>
            <table border="0">
                <tr>
                    <td width="700px">
                        <H1><font color="#008000"> Longclaw Expeditions </font></H2> 

                    <H2><font color="#800000" size="5px"> Don’t Listen to Them, Go and See by Yourself.</font></H2> <br> <br>

Since 2015, Longclaw Expedition has been focused on bringing our customers the best in esteem and quality travel game plans. We are enthusiastic about movement and sharing the world’s marvels on the relaxation travel side, and giving corporate explorers the best services to encourage their business travel needs. <br><br>

A solid and “believed” travel brand of Africa, our qualities incorporate a vast and faithful client base, a multi-channel stage for relaxation and business explorers, a powerful portable eco-framework for a range of voyagers and providers. Below are some of the services we offer.<br><br>
<ul>
<li> Airport Transfers
<li>Beach Safari
<li>Bush Safari
<li>Birding Safari
<li>Hotel Booking and Reservation
</ul>
<br>
 </td>
                    
                    
                    <td> </td>
                </tr>
            
                
            </table>
        </div>
    </div>
    
    <div class="bottom_up">
        <div>
                <H2>Book a Safari</H2>
                
                <table>
                                        
                    <tr>
                        <td width="500px"> </td>
                        <td>    <input type="text" placeholder="First Name">
                        <td>    <input type="text" placeholder="Last Name">
                    </tr>
                    <tr height="30px">
                        
                    </tr>
                    <tr>
                        <td width="500px"> </td>
                        <td>    <input type="text" placeholder="Email Id">
                        <td>    <input type="text" placeholder="Mobile No">
                    </tr>
                    
                    <tr height="30px">
                        
                    </tr>
                    <tr>
                        <td width="500px"> </td>
                        <td>    <select> <option> -- Adults -- </option> <option> 1 </option> <option> 2 <option> 3 <option> 4 <option> 5 <option> 6 <option>  </option> </select>
                                                <td>    <select> <option> -- Kids -- </option> <option> 1 </option> <option> 2 <option> 3 <option> 4 <option> 5 <option> 6 <option>  </option> </select>
                                                <td>    <select> <option> -- Game Park -- </option> <option> Maasai Mara </option> <option> Tsavo National Park <option> Amboseli Natoina Park <option>Samburu National Park <option> Nairobi National Park <option> Nakuru National Park <option>  </option> </select>
                                        </tr>
                                        <tr>
                        <td>    <input type="text" placeholder="Booking date">    
                                        </tr>                                                                                      
                            
                    
                        <tr height="30px">
                        
                    </tr>
                    <tr>
                        <td width="500px"> </td>
                        <td colspan="2">    <textarea placeholder="Message"> </textarea>
                    </tr>
            

    

        
                        <tr height="30px">
                        
                    </tr>
                    <tr>
                        <td width="500px"> </td>
                        <td colspan="2">    <button> SUBMIT </button>
                    </tr>
                </table>
                
        </div>
    </div>
    
    
    
    
    
    <div class="nav_down">
        <div>
         &copy; Longclaw Expeditions 
        </div>
    </div>
</html>

這是代碼。 我將圖像保存在我的計算機中。 即使使用 src 標簽它仍然不起作用。 我可以更改什么以使背景圖像出現在旅行和旅行的位置？ 第一部分是 css 代碼，其樣式標簽后跟 html 標簽。 我在 div 樣式背景圖像標記處遇到問題。 我想我有正確的代碼，但圖像顯示為灰色背景。

1 個解決方案

解決方案1
 0  2021-12-24 13:48:05

您提供的代碼段中有 2 個問題。

A) 它應該是style="background-image:url('path-to-background-image');" 而不是style="background-image:src('path-to-background-image');"

B） path-to-background-image是相對的，所以：

  • 如果您正在提供該頁面（例如在http://localhost:8080 ），則在路徑http://localhost:8001/Users/brian/Documents/Website%20KCITI/shoebill-uganda.png
  • 如果您直接在瀏覽器中打開 HTML 文件，則在path-to-html-file/Users/brian/Documents/Website%20KCITI/shoebill-uganda.png

您需要使用正確的語法和正確的路徑。

通常，web 頁面中使用的圖像與源代碼放在同一目錄中（例如在單獨的images文件夾中）以避免此類問題。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 需要幫忙。 基本的HTML / CSS。 標頭不變色 背景圖片未顯示。 CSS。 標頭1. HTML5 HTML和CSS。 我的div類對CSS沒有反應 HTML / CSS。 需要幫助，僅使我的邊框充滿屏幕的整個寬度 我的CSS背景圖片未顯示 我是CSS新手。 我的背景圖片未加載。 我正在使用外部CSS，我的操作系統是Windows 我的 CSS 樣式表沒有鏈接到我的 html HTML和CSS。 錯誤：當我增加比例尺時會附加1px邊框 如何使我的網站的特定部分看起來像這樣？ （使用 HTML 和 CSS。） 如何在我的 html/css 中顯示我的背景圖像？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM