透明框中的文本

2024-01-18 13:49 小编

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.

源代码是何等的：

<!DOCTYPE html>
<html>
<head>
<style>
div.bac公斤round
{
  width: 400px;
  height: 266px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid black;
}

div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;
  bac公斤round-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

div.transbox p
{
  margin: 30px 40px;
}
</style>
</head>

<body>

<div class="bac公斤round">
<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>

首先，咱们竖立一个 div 元素 (class="bac千克round")，它有静止的高度与宽度、后盾图像，以及边框。此后我们在第一个 div 内建设稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背光景与边框 - 而且它是透亮的。在通明 div 外部，我们在 p 元素中介入了一些文本。

返回首页上一篇：HTML实现文本框只读不能修改其内容下一篇：图像透明度 - Hover 效果