Question

在网页设计方面，我是一个完整的菜鸟。我刚开始学习一些基础知识。目前我正在努力使图像成为我网页的标题。我已经访问了很多教程，如果你在网页的目录中有一个专门用于图像的文件，并且使用高度和宽度说明符使其适合横幅的范围，我就会说使用代码<img src="images/wood.jpg" height="168" width="100">。据说，我刷新页面，没有显示图像。还有关于如何使单词叠加在图像顶部的信息的奖励点。

                <!DOCTYPE HTML>
            <!--- COMMENT--->


            <html long="en">


            <head>

            <meta charset="UTF -8"/>
            <Title>Ken's Woodworking Emporium</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <!--[if lt IE 9]>
            <script>
                document.createElement("article");
                document.createElement("aside");
                document.createElement("footer");
                document.createElement("header");
                document.createElement("main");
                document.createElement("nav");
                document.createElement("section");
                </script>
                <![endif]-->

            <meta name="description" contents= "Learn everything you want to know 
            about wood working."/>

            <meta name="keyword" content=html5 canvas,html5,toutorial,html5 doctype,
            video, learn/>

            <meta name="robots" Content="index, follow"/>

            <base href="http://localhost/html/"/>

            <link rel= stylesheet" href="styles.css"/>


            </head>

            <body>
                <header class="banner">
                    <h1>Woodworking</h1>
                    <img src="images/wood.jpg">
                    <p> Local woodworkers</p>
                </header>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="archive.html">Archive</a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>
                </nav>

                <main>
                    <section>
                        <h2>Carpenty</h2>
                        <article>
                            <header>
                                <h3>Details on carpentry</h3>
                                <p>(Author, date)</p>
                            </header>
                            <p>THis is the story text.This is the story text.</p>
                            <p>This is the story text.This is the story text.</p>
                        </article>
                    </section>

                    <section>
                        <article>
                            <header>
                                <h3>Custom carpentry.</h3>
                                <p>(Author, date)</p>
                            </header>
                            <p>THis is the story text.This is the story text.</p>
                            <p>This is the story text.This is the story text.</p>
                        </article>
                    </section>

                    <section>
                    <h2>Restoration</h2>
                        <article>
                            <header>
                                <h3>Old to new</h3>
                                <p>(Author, date)</p>
                            </header>
                            <p>THis is the story text.This is the story text.</p>
                            <p>This is the story text.This is the story text.</p>
                        </article>
                    </section>

                    <section>
                        <article>
                            <header>
                                <h3>refinishing.</h3>
                                <p>(Author, date)</p>
                            </header>
                            <p>THis is the story text.This is the story text.</p>
                            <p>This is the story text.This is the story text.</p>
                        </article>
                    </section>
                </main>

                <aside>
                    <h2>Have a request?</h2>
                    <p>If you have a custom order request feel free to contact us at 918-555-5555, or ABC123@yahoo.com</p>
                </aside>

                <footer>
                    <p>Footer information</p>
                </footer>

            </body>



            </html>

Answer 1

对于按钮或带叠加的东西，您可以使用css中的背景图像，如上所述。 overwise你需要一个包含图像的包含属性position: relative的包装器和另一个包含以下作为覆盖层的div：

position: absolute;
z-index: 2; // you can use higher number if needed

并相对于具有top，right，bottom和/或left属性的容器应用绝对位置，右上角应如下所示10px填充即：

in html：

<div class="img-wrap">
    <img src="wood.jpg" alt="wood">
    <div class="img-overlay">overlay text</div>
</div>

在css中：

.img-wrap {
  position:relative;
}
.img-wrap .img-overlay {
  position: absolute;
  z-index:2;
  top: 10px;
  right: 10px;
}

如果它的唯一内页不显示图像，可能是因为图像路径相对于最后一个文件夹，最好在网站文件夹的根目录或相对于网站文件夹的根目录时使用绝对路径。像这样;

<img src="/images/wood.jpg" alt="wood image">

或

<img src="http://www.yourwebsite.com/images/wood.jpg" alt="wood image">

或者如果您使用wordpress，它可能看起来像其中一个

<img src="http://www.yourwebsite.com/wp-content/uploads/**/****/images/wood.jpg" alt="wood image">
<img src="http://www.yourwebsite.com/wp-content/images/wood.jpg" alt="wood image">
<img src="http://www.yourwebsite.com/wp-content/themes/your-theme/images/wood.jpg" alt="wood image">

等

P.S for better semantics总是使用alt属性和图像。

Answer 2

在您的网络服务器上，public_html应如下所示：

index.html
图像

上面的图片文件夹应该包含文件＆＃39; wood.jpg＆＃39;在其中。

在您的本地PC上，右键单击wood.jpg文件并转到属性。路径区分大小写。如果扩展名以.jpg结尾，那么您的代码应如下所示：

<img src="images/wood.jpg" height="168" width="100">

如果扩展名以.JPG结尾，那么您的代码应如下所示：

<img src="images/wood.JPG" height="168" width="100">

刷新时，按住ctrl + F5清除缓存并查看您所做的更改。

如果您需要使图像覆盖图像，则需要在CSS中添加位置元素。 W3在这里提供了一个很棒的教程：https://www.w3schools.com/css/tryit.asp?filename=trycss_zindex

Answer 3

如果您希望将横幅图像作为其他元素的背景，而不是使用img标记，则可以尝试使用background-image CSS属性。对样式表一无所知，我尽可能简单明了。

我给你一个小例子@ https://jsfiddle.net/wck2hyxt/1/

HTML：

        <body>
            <header class="banner">
                <h1>Woodworking</h1>
                <p> Local woodworkers</p>
            </header>
        </body>

CSS：

header.banner {
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg");
  background-size: cover;
  height: 168px;
  width: 100%;
  padding: 10px;
}

注意：我使用外部图像作为横幅。您可以将该网址更改为＆＃34; / path / to / image＆＃34;。此外，我相信你的目的是使宽度100％，而不仅仅是100。

图像没有显示在HTML中

3 个答案: