在 css 的帮助下，我如何只给 div 而不是整个 body 染上靛蓝色？

Question

我想得到如图这样的结果

我已经写了一些代码，但我没有得到我想要的确切结果，我的目标是给 div 一个靛蓝颜色，其余的留白色 body .

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <!-- Bootstrap and fontawesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body >
<style>
   .arc {
       
       position: absolute;
       width: 3.5em;
       height: 2em;
       border-radius: 70%;    /* make it circular */
       
       border-bottom:5px solid brown;  /* the arc effect */
       z-index: -1;
   }
   
   .wrapper > .arc {
       display: block;
   }
   body{background-color:indigo !important}
</style>
<div class="wrapper container" >
    <div class="arc"></div>
    <div class="exp"><span style="color:white !important">Example</span></div>
</div>

        
</body>
</html>

Answer 1

我的提议很简单，新的附加容器 "logo" 带有适当的 height、width 和 background color、flexbox class container 选择器，在正确的地方有点 white space。我希望你会满意。

.arc {
  margin-top: 0.75rem;
  position: absolute;
  width: 4.4em;
  height: 2em;
  border-radius: 70%;
  /* make it circular */
  border-bottom: 5px solid brown;
  /* the arc effect */
}

.wrapper {
  height: 90%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  margin: 1rem;
  background-color: indigo;
  width: 90px;
  height: 45px;
}

.exp {
  font-size: 1.2rem;
}

<html>

<head>
  <title>Page Title</title>
  <!-- Bootstrap and fontawesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <div class="logo">
    <div class="wrapper container">
      <div class="arc"></div>
      <div class="exp"><span style="color:white !important">Example</span></div>
    </div>
  </div>

</body>

</html>

Answer 2

<style>
    .wrapper{
        background-color:#4B0082;
    }
</style>

这将帮助您限制徽章的靛蓝色。

在 css 的帮助下，我如何只给 div 而不是整个 body 染上靛蓝色？

How i can give a indigo color only to a div instead of whole body with help of css?

html

css

bootstrap-4