创建一个具有文本的拥有背景图像的透明框 - 在线编辑器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div.background {
      width: 500px;
      height: 250px;
      background: url(klematis.jpg) repeat;
      border: 2px solid black;
    }

    div.transbox {
      width: 400px;
      height: 180px;
      margin: 30px 50px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.6;
      filter: alpha(opacity=60);
      /* For IE8 and earlier */
    }

    div.transbox p {
      margin: 30px 40px;
      font-weight: bold;
      color: #000000;
    }
  </style>
</head>
<body>
  <div class="background">
    <div class="transbox">
      <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
      </p>
    </div>
  </div>
</body>
</html>
​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div.background {
      width: 500px;
      height: 250px;
      background: url(klematis.jpg) repeat;
      border: 2px solid black;
    }
​
    div.transbox {
      width: 400px;
      height: 180px;
      margin: 30px 50px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.6;
      filter: alpha(opacity=60);
      /* For IE8 and earlier */
    }
​
    div.transbox p {
      margin: 30px 40px;
      font-weight: bold;
      color: #000000;
    }
  </style>
</head>
<body>
  <div class="background">
    <div class="transbox">
      <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
      </p>
    </div>
  </div>
</body>
</html>