Question

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

我正在尝试在这个img下添加文本但是第二个我添加了p标签并添加了我的段落，就像我的网站宽度突然变得糟糕......我将把我的HTML和CSS放在下面。注意我把p标签拿出去，这样你就可以看到应该的样子......我把p标签放在一切都变得一团糟。

编辑：让我试着更好地解释一下我要做的事情。第一个小提琴是我的“主页”页面。当用户点击“Game Preview：Warriors Rams”链接时，他们将被带到另一个小提琴2的页面。当我试图将一个段落置于Rams Player 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

＆＃34;问题＆＃34;在这里：

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;
}

有两个＆＃34;问题＆＃34;有：

此属性中存在真正的错误：
```
background-repeat: no-repeat center center fixed; 
```
您要将background-repeat，background-position和background-attachment的值设置在一个属性（background-repeat）中，它应该像这样分开：
```
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
```
不是错误，而是造成问题的原因：background-size:cover部分。您设置背景以适合html元素的大小，添加新段落，文档大小（和html）更改并调整图像大小，这会导致＆＃34;缩放效果＆＃34;您在共享的两张图片中看到的内容。

HTML / CSS网站格式

2 个答案: