堆栈内存溢出
  繁体   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  3   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