Question

好的只是要明确这是我之前第一次使用这个网站，所以如果我没有发布完全正确的话，我很抱歉。

好的我正在为一项作业做这件事，这就是教师所做的事情＆＃34;将您的备用CSS文件更新为： - 使用斜体文本作为页脚文本 - 使用为身体配置的背景图像 - 为段落内容使用纯色背景颜色，以便它们在背景图像上更具可读性。＆＃34;这是一个基本的HTML课程，我们只是学习如何放入图像。标题和段落的背景颜色覆盖了背景图像，我不知道如何解决这个问题，因为我现在学到的任何帮助都会非常感激。

    HTML:
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>Two tickets please</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style-alt.css">
    </head>

    <body>
    <header>
        <h1>Shane&rsquo;s Travel Fan Page</h1>
    </header>
    <hr>
    <main>
        <h2>Why not just take a Staycation?</h2>
        <p>First of all let me say that staycations can be a great way to spend a little time off, however
            <br> I find being away from my home more to my liking. You can argue by definition every time
            <br> we go to work or school that we are traveling so what is the big deal? While this is technically
            <br> travel it is mechanical, souless, unless of course you pass by some great scenery every day for example
            <br> if you lived in Duluth. Travel is a great way to step away from the familiar, meet new people and learn more
            <br> about yourself. If you can find time to get away whether it be locally, across the country, or across the world,
            <br> then take the chance and make some memories. Would you like to know more? Check out: <a href="http://www.budgettravel.com"><span class="hyper">BudgetTravel.com</span></a>
        </p>
        <h2>Where have I been?</h2>
        <p>These are my most memorable destinations:</p>
        <ul>
            <li class="destination"><strong>Arizona</strong></li>
            <li class="destination"><strong>Hawaii</strong></li>
            <li class="destination"><strong>Japan</strong></li>
            <li class="destination"><strong>Malayasia</strong></li>
            <li class="destination"><strong>Mexico</strong></li>
            <li class="destination"><strong>Thailand</strong></li>
            <li class="destination"><strong>The Philippines</strong></li>
            <li class="destination"><strong>Singapore</strong></li>
        </ul>

        <p id="new">While I love traveling through the US, international travel has always been number one in my mind, plus I met my wife abroad so I am a little biased. If you are also interested in travel and want to discuss it my email is at the bottom of the page. Happy Trails!</p>
    </main>
    <footer>
<a href="mailto:shanelamb@lamb.com"><small>Email:shanelamb@lamb.com</small></a>
        <br>
        <br>
        <small>Copyright &copy; 2016 Shane Lamb</small>
      </footer>
    </body>

    </html>

    CSS: 
    body { background-color: #F0FFFF;
    color: #5B5B5B;
    background-image: url(river.jpg);
    background-position: right;
    background-repeat: no-repeat;
    font-family: Verdana, Arial, sans-serif;
    }
    h1 { background-color: #43CD80;
     color: #000000;
     "Times New Roman", Georgia, serif;}
    h2 { background-color: #BDFCC9;
     font-family: Georgia, "Times New Roman", serif;}
    p {background-color: #CCFFFF;}
    footer { font-style: italic;
         font-size: .75em;
         text-align: left;}
    ul { list-style-type: circle;}
    .hyper {
    font-weight: bold;
    font-size: 120%;
    .destination { color: #B8860B;}
    #new { color: #FF8C00}

Answer 1

在作业时要求代码不是一个好主意。整个目的是学习。因此，不是给你代码，而是＃34;如何＆＃34;

在html中标识您正在处理的部分。因此，例如，如果您想对页脚中的段落文本执行某些操作，请通过在css中在它们之间放置一个空格来标识footer然后p。这是一个基本的特异性规则。像这样：

页脚p { / *这里的东西* / }
在许多情况下，您需要使用class标识元素，因为在全球范围内进行更改并不合理。例如，您可能会在内部包含许多div个元素。如果您对div执行某些操作，它将适用于所有div元素。不理想。因此，您要为要设置样式的div添加一个类。像这样：

文本

现在，您只能按照以下方式设置特定div段的样式：

.myclass p{
   /* something here */
}

在另一个常见场景中，您的类可能会在几个div上重复，但您只想在全局使用某些样式，而在某些div中使用某些样式。这是CSS的美妙之处 - 级联和特异性规则。例如，你有两个大小相等的div，一个是红色，另一个是蓝色。你需要做这样的事情：

CSS看起来像这样：

.box{
  /* something to be shared by both box divs */
}
.box.red{
  /* make it red*/
}
.box.blue{
  /* make it blue*/
}

请注意，框与红色或框与蓝色之间没有空格。这意味着您在同一个div中使用这两个类。

网上有很多关于如何将样式应用于背景和文本等的教程。转到这些教程和资源并熟悉它们

一些好的资源是：

Answer 2

我认为我没有理解这个问题 - 但是根据我对老师的要求的理解 - 这些段落应该涵盖背景图片，以便您可以更轻松地阅读段落内容。（纠正我，如果我错了）

如果要使段落背景颜色半透明，可以使用rgba（）作为颜色。像这样 -

  p {
    background-color: rgba(204, 255, 255, 0.7);
    color: black;
  }

在rgba（r，g，b，a）中 - 参数为 -

r - 多少红色阴影（0-255）
g - 绿色阴影（0-255）
b - 蓝色阴影（0-255）
a - 先例中的不透明度（0-1）

以下是一个实例 - https://jsfiddle.net/g0kq073v/

背景颜色和图像发生碰撞。

2 个答案: