老师您好。

老师您好我写出来效果相似，但不按照要求，按照要求的我有点看不懂。块元素背景是图片。如何在背景下端填写文字还是带左右下边框的文字，我有点迷

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
  head,body{
   margin: 50px;

  }
  .subject{
   background-color: #fff;
      border: 2px #E8CCFF dotted;
      width: 1200px;
  }
  .headter{
      width: 1200px;
                       padding: 0px;
                       margin-bottom: 0px;
      overflow: hidden;
      zoom:1;
  }
  .div1{
   background-image:url("http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg");
   background-repeat: no-repeat;
   background-position: center;
   width: 33.33%;
   height: 150px;
   float: left;
   margin: 0px;
   padding: 0px;

  }
  .div2{
   background-image: url("http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg");
   background-repeat: no-repeat;
   background-position: center;
   width: 33.33%;
   height: 150px;
   float: left;
  }
  .div3{
   background-image: url("http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg");
   background-repeat: no-repeat;
   background-position: center;
      width: 33.33%;
   height: 150px;
   float: left;
  }
        .tail{
        width: 1200px;
        overflow: hidden;
        }
        .div4{
   background-image:url("http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg");
   background-repeat: no-repeat;
   background-position: center;
   width: 33.33%;
   height: 150px;
   float: left;

  }
  .div5{
   background-image: url("http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg");
   background-repeat: no-repeat;
   background-position: center;
   width: 33.33%;
   height: 150px;
   float: left;
  }
  .div6{
   background-image: url("http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg");
   background-repeat: no-repeat;
   background-position: center;
      width: 33.33%;
   height: 150px;
   float: left;
  }
  li{
   list-style: none;
  }
  ul{
   margin: 0px;
   padding-left: 80px;
  }
  .text1{
   width: 238px;
   float: left;
   border-bottom: 1px #E8CCFF solid;
   border-left: 1px #E8CCFF solid;
   border-right: 1px #E8CCFF solid;
   margin-top: -10px;
  }
  .text2{
   width: 238px;
   margin-left: 160px;
   float: left;
   border-bottom: 1px #E8CCFF solid;
   border-left: 1px #E8CCFF solid;
   border-right: 1px #E8CCFF solid;
   margin-top: -10px;
  }
  .text3{
   width: 238px;
   margin-left: 160px;
   float: left;
   border-bottom: 1px #E8CCFF solid;
   border-left: 1px #E8CCFF solid;
   border-right: 1px #E8CCFF solid;
   margin-top: -10px;
  }
</style>
</head>
<body>
<div class="subject">
<div class="headter">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>

<ul>
  <li class="text1">欢迎来到爱慕课学习新知识!</li>
  <li class="text2">欢迎来到爱慕课学习新知识!</li>
  <li class="text3">欢迎来到爱慕课学习新知识!</li>
</ul>

<div class="tail">
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
     <ul>
  <li class="text1">欢迎来到爱慕课学习新知识!</li>
  <li class="text2">欢迎来到爱慕课学习新知识!</li>
  <li class="text3">欢迎来到爱慕课学习新知识!</li>
</ul>
</div>
</body>
</html>