如何使用CSS仅为指定div设置靛蓝色背景而非整个body？

实现效果 #

修改方案 #

你当前代码错误地将靛蓝色背景设置在了body元素上，导致整页背景变色，调整几处样式即可实现需求：

• 移除body的靛蓝色背景样式规则，保留默认白色背景
• 为.wrapper容器添加position: relative，确保内部绝对定位的弧形元素以该容器为基准定位
• 为.wrapper添加靛蓝色背景和适当内边距，仅让目标容器显示靛蓝色背景

完整修改后代码 #

<!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">
<style>
   .arc {
       position: absolute;
       width: 3.5em;
       height: 2em;
       border-radius: 70%;    /* 生成圆形基础 */
       border-bottom:5px solid brown;  /* 实现弧形效果 */
       z-index: 1;
   }
   .wrapper {
       position: relative;
       background-color: indigo;
       padding: 1.5em;
   }
   .wrapper > .arc {
       display: block;
   }
</style>
</head>
<body >
<div class="wrapper container" >
    <div class="arc"></div>
    <div class="exp"><span style="color:white !important">Example</span></div>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Muzamil