Question

您好我有一个网站，其中有一些文字告诉用户该网站。我想在文本后面画一个白色矩形，将它与背景分开。

我可以绘制矩形，但矩形会覆盖文本。

我使用下面的CSS代码绘制矩形：

#rect1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #ffffff;
}

以下是主页中的HTML：

<body>
  <div class="container_24">
    <header>
      <h1>Omicrome</h1>
      <nav>
        <ul>
          <li><a href="# " class=s elected>Home</a></li>
          <li><a href="articles.html">Articles</a></li>
          <li><a href="software.html">Projects</a ></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>

      <div class="banner grid_18" href="about.html">
        <a href="logic.html" class="button" id="new">View Article</a>
        <h2>

        </h2>
      </div>
      <div class=" grid_8 callout"></div>
      <a href="gallery.html" class="button" id="spacesoft">View Gallery</a>
    </header>
    <div id="rect1"></div>
    <div class="main clearfix">
      <div class="grid_9">
        <h3>About The Site</h3>
        <p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in
          the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
          <p><a href="about.html" class="button">Find Out More</a></p>
      </div>
      <div class="grid_9">
        <h3>Our Content</h3>
        <p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We
          ask questions like "Why dont we have a robotic Mars colony?" and find an answer or solution. </p>
        <p>
        </p>
        <p> </p>
        <p><a href="about.html" class="button">Find Out More</a></p>
      </div>
      <div class="grid_6">
      </div>

<div id "rect1></div>

是在html代码中绘制矩形的部分。如何让它在文本后面绘制矩形？

Answer 1

您可以添加

public function afterSave(Event $event, Entity $entity, ArrayObject $options)
{
   if (isset($entity)) {
        $images = TableRegistry::get('Images');
        $images->query()
            ->update()
            ->set(['foreign_key' => $entity->id])
            ->where([
                'foreign_key IS NULL',
                'model' => 'Albums'
                ])
            ->execute();// conditions
           }
}

到z-index: -1;：

#rect1

Fiddle

（您可能还应该调整矩形大小以使其看起来更好。）

Answer 2

如果您确实想要使用绝对位置，请将其z-index设置为-1。但我想你可能只想给包含文本的div或span一个不同的背景和边框，而不是在它后面画一个新的div。

Answer 3

<html>
    <head>
        <style>
             #rect1{
                position: absolute;
                width: 100px;
                height: 100px;
                background: #eee;
                z-index:-1;
                 }
        </style>
    </head>
       <body>

   <div class = "container_24">
   <header>
   <h1>Omicrome</h1>
   <nav>
    <ul>
      <li><a href="# " class = selected>Home</a></li>
      <li><a href="articles.html">Articles</a></li>
      <li><a href="software.html">Projects</a ></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>

  <div class = "banner grid_18" href="about.html">
   <a href="logic.html"  class="button" id ="new">View Article</a>
    <h2>

    </h2>
  </div>
  <div class=" grid_8 callout"></div>
   <a href="gallery.html"  class="button" id ="spacesoft">View Gallery</a>
</header>

<div id = "rect1"></div>


<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
   <p><a href="about.html"  class="button">Find Out More</a></p>
   </div>
   <div class ="grid_9">
   <h3>Our Content</h3>
   <p>We post a variety of ideas and project's based around space and     technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We ask questions like "Why dont we have a robotic Mars  colony?" and find an answer or solution. </p><p>
</p><p>  </p>

  <p><a href="about.html" class="button">Find Out More</a></p>
  </div>
  <div class ="grid_6">


  </div>
</html>

这就是你的代码..此外，如果你愿意的话，你可以使用类似的引导类将div文本与其他内容分开。

我将背景颜色保持为#eee，以便您可以看到它。根据您的需要进行编辑。

HTML和CSS矩形无法正确显示

3 个答案: