HTML/CSS 网站格式

Question

我正在编写我的第一个网站并遇到了一个（希望如此）小问题。

我正在尝试在此 img 下添加文本，但第二次我添加了 p 标签并添加了我的段落，就像我的网站宽度突然变大一样......我将把我的 HTML 和 CSS 放在下面。 注意我去掉了 p 标签，这样你就可以看到它应该是什么样子......我把 p 标签放在所有东西中的那一刻就变得一团糟。

编辑：让我尝试更好地解释我正在尝试做的事情。 第一个小提琴是我的“主页”。 当用户点击链接“游戏预览：勇士公羊”时，他们被带到另一个页面，这是第 2 号小提琴。当我试图在公羊播放器 IMG 下放置一段时，网站背景图像似乎放大，“勇士”右侧的文字向外拉屎......第一张图片有下面的段落，第二张没有。 对不起，糟糕的油漆编辑，图像太大。 小提琴 1： https: //jsfiddle.net/t8fveqdL/1/ 小提琴 2： https : //jsfiddle.net/c1hyad70/

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Official Website of the Whitewater Warriors</title>
        <link rel="shortcut icon" href="images/WhitewaterWarriorsLogo - Copy.ico">
        <link rel="stylesheet" href="PREVIEW.css"> 
    </head>

    <body>
        <header>
            <img src="images/WhitewaterWarriorsLogo.png" height="150" width="150" alt="Warrior Logo">
            <hgroup>
                <h1> <span class="shadow">The Official Website of the Whitewater Warriors</span> </h1>
            </hgroup>
        </header>
        <nav id="nav_bar">
        <ul>
            <li><a href="index.html" class="current"> Home </a></li>
            <li><a href="speakers.html"> Speakers </a></li>
            <li><a href="luncheons.html"> Luncheons </a></li>
            <li><a href="tickets.html"> Tickets </a></li>
            <li><a href="about.html"> About Us </a></li>
        </ul>
        </nav>
        <section>
        <img src="images/gurley_opbd_main_111115.jpg" alt="Rams Player" width="815px">

        </section>

        <footer>
            <p>
                &copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755
            </p>
        </footer>

    </body>
</html>

CSS：

section {
    position: relative;
    width: 815px;
    margin-bottom: 10px;
}

section img {
    position: relative;
    top: -26.5px;
    display: block;
    margin: 0 auto;
}

section p {
    padding: .5em;
}

Answer 1

您可以尝试添加图像作为背景图像
background: url('images/bg.jpg');

注意：否则提供小提琴以更好地理解

为什么不使用 PhotoShop 或其他任何方式编辑图像以在其中包含文本：P 只是说

Answer 2

“问题”在这里：

html {
    background-image: url("images/maxresdefault.png"); 
    background-repeat: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

那里有两个“问题”：

此属性中的真正错误：
```
 background-repeat: no-repeat center center fixed;
```
您正在一个属性 ( background-repeat ) 中设置background-repeat 、 background-position和background-attachment的值，当它应该像这样分开时：
```
 background-repeat: no-repeat; background-position: center center; background-attachment: fixed;
```
不是错误，而是导致问题的原因： background-size:cover部分。 您正在设置背景以适应html元素的大小，当您添加新段落时，文档（和html ）的大小会发生变化并且图像会被调整大小，这会导致您在你分享的两张图片。

HTML/CSS 网站格式

问题描述

2 个解决方案

解决方案1
1 2015-11-13 03:56:44

解决方案2
1 已采纳 2015-11-13 04:59:13

HTML/CSS 网站格式

问题描述

2 个解决方案

解决方案1 1 2015-11-13 03:56:44

解决方案2 1 已采纳 2015-11-13 04:59:13

解决方案1
1 2015-11-13 03:56:44

解决方案2
1 已采纳 2015-11-13 04:59:13