如何在文本外应用背景色

Question

如何在文本外应用背景色

3

我是一个HTML和CSS的新手。我试图编写这张图片的输出：https://istack.dev59.com/Qy7Sd.webp

唯一的问题是，当我添加砖块背景时，它也出现在输出的白色部分，这不是我想要的。这是我到目前为止编写的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Terps Calculators Inc</title>
        <style>
           body{padding: 70px; border-style: ridge; border-width: 20px; border-color: grey;}
           header, nav, main, footer{background-color: rgb(254, 189, 173); border: 4px solid grey;}
            header{font-family: Kunstler Script; font-size: 70px; padding: 30px 237px;}
            nav{font-family: sans-serif; font-size: 19px; text-align: center;}
            a:link{color: red;}
            main{padding: 30px 200px; color: black; font-weight: bold;}
            .intro{ font-weight: bold; text-decoration: underline; font-size: 30px;}
            p{font-size: 18px;}
            .head{font-weight: bold; font-size: 22px; font-family: arial;}
            .text{font-style: italic;}
            .color{text-decoration: underline; color: red; font-size: 25px; font-style: italic;}
            footer{border: none; text-align: center; font-size: 20px; font-weight: bold;}
        </style>
    </head>
    <body>
        <header>
            <img src="Burj Khalifa.jpg" width="100px" height="130px"> Terps Calculators Inc. <img src="University of Maryland.png" width="100px" height="100px">
        </header>
        <br>
        <nav>
            <a href="http://www.umd.edu">http://www.umd.edu,</a> <a href="http://www.cs.umd.edu">http://www.cs.umd.edu,</a> <a href="http://www.testudo.umd.edu">http://www.testudo.umd.edu</a>
        </nav>
        <br>
        <main>
            <div class="intro">Introduction</div>
            <p><span class="head">Terps Calculators Inc.</span><span class="text"> implements and provides these calculators for your use. We keep expanding our collection every day, so make sure you stop by often.</span></p>
            <div class="intro">Calculators</div>
            <br><br>
            <img src="Calculator.png" height="60px" width="50px"> <span class="color">&nbsp;Grades Calculator</span>
            <br>
            <img src="Calculator.png" height="60px" width="50px"><span class="color">&nbsp;Interest Calculator</span>
        </main>
        <br>
        <footer>Terps Calculators Inc.&reg;</footer>
    </body>
</html>

- Shrey Verma

将您想要在白色列中显示的内容包装在<div>...</div>中，并将其设置为z-index:1，将砖块背景设置为z-index:0，确保使用绝对定位以使它们正确对齐。 - SARAN SURYA

嘿，你介意编辑一下代码并把它还给我吗？因为我不理解你写的内容。谢谢。 - Shrey Verma

3个回答

2

如Nitlixis所说，您必须将内容放在一个div中。完整代码如下：

...

<html>
    <head>
        <title>Terps Calculators Inc</title>
        <style>
            body{
                background: url(https://s4.uupload.ir/files/722_30hg.jpg) 
            no-repeat; background-size: cover; margin: 100px;
            }
           .body{padding: 70px; border-style: ridge; border-width: 20px; border-color: grey;
            background-color: white;
            }

           header, nav, main, footer{background-color: rgb(254, 189, 173); border: 4px solid grey;}
            header{font-family: Kunstler Script; font-size: 70px; padding: 30px 237px;}
            nav{font-family: sans-serif; font-size: 19px; text-align: center;}
            a:link{color: red;}
            main{padding: 30px 200px; color: black; font-weight: bold;}
            .intro{ font-weight: bold; text-decoration: underline; font-size: 30px;}
            p{font-size: 18px;}
            .head{font-weight: bold; font-size: 22px; font-family: arial;}
            .text{font-style: italic;}
            .color{text-decoration: underline; color: red; font-size: 25px; font-style: italic;}
            footer{border: none; text-align: center; font-size: 20px; font-weight: bold;}
        </style>
    </head>
    <body>
        <div class="body">
        <header>
            <img src="Burj Khalifa.jpg" width="100px" height="130px"> Terps Calculators Inc. 
            <img src="University of Maryland.png" width="100px" height="100px">
        </header>
        <br>
        <nav>
            <a href="http://www.umd.edu">http://www.umd.edu,</a> <a href="http://www.cs.umd.edu">http://www.cs.umd.edu,</a> 
            <a href="http://www.testudo.umd.edu">http://www.testudo.umd.edu</a>
        </nav>
        <br>
        <main>
            <div class="intro">Introduction</div>
            <p><span class="head">Terps Calculators Inc.</span><span class="text">
             implements and provides these calculators for your use. We keep expanding 
             our collection every day, so make sure you stop by often.</span></p>
            <div class="intro">Calculators</div>
            <br><br>
            <img src="Calculator.png" height="60px" width="50px"> <span class="color">&nbsp;Grades Calculator</span>
            <br>
            <img src="Calculator.png" height="60px" width="50px"><span class="color">&nbsp;Interest Calculator</span>
        </main>
        <br>
        <footer>Terps Calculators Inc.&reg;</footer>
        </div>
    </body>
</html>```

- Arman Ebrahimi

嘿，我想要你输出的白色部分的背景而不是内部的背景。 - Shrey Verma

0

看起来是新手代码。创建一个父包装器，然后是内部包装器，然后在包装器内部创建不同的部分。

- Kartik Jain

2

https://jsfiddle.net/L5mvnyc2/20/ - Kartik Jain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user16383053 · Accepted Answer

我认为如果您像这样将所有内容包装在一个 div 中会更好：

<div class="wrapper">
    <!-- A lot of content here -->
</div>

将所有内容放在div标签中，将div标签的 margin 设置为约5-10%，以便留出空隙展示砖块图案，然后将body标签的"background"属性设置为你的砖块图像。