HTML/CSS 的透明盒子？

Question

我想制作一个透明盒子，里面有内容，如下图..

我不知道要创建这个。我应该使用 HTML5 技术吗？你能帮我制作这个盒子吗？

Answer 1

您可以只使用背景图片：

HTML

<div class="box">
   text text text
</div>

CSS

.box{
  height: 200px;
  width: 400px;
  background: url("http://www.placecage.com/400/200");
}

EXAMPLE

Answer 2

对 background-color 使用 rgba() 值，并通过更改 alpha 值 (rgba(r, g, b, a)) 来控制不透明度。

div {
  background: rgba(100, 10, 10, 0.7);
  width: 300px;
  height: 250px;
  border-radius: 30px;
  text-align: center;
  line-height: 250px;
  color: white;
  margin: 0 auto;
}
body, html {
  background: url(http://www.lorempixel.com/600/400) 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div>Content</div>

Answer 3

您可以使用不透明度属性

div {
    opacity: 0.5;
}

http://www.w3schools.com/cssref/css3_pr_opacity.asp

或者您可以使用 rgba 背景颜色仅使背景透明：

div {
    background-color: rgba(255, 0, 255, 0.5);
}

Answer 4

使用 rgba 作为背景色。

背景：rgba(30, 30, 30, 0.5) 将为背景赋予颜色 rgb(30,30,30) 和 0.5 的不透明度。

稍微调整一下最后的值。

Answer 5

尝试这样的事情：http://jsfiddle.net/yb69nw1u/

HTML:

<img src="http://lorempixel.com/400/200" />
<div class="box-transparent">
    This is some demo Text
</div>

CSS:

.box-transparent {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: rgba(100, 100, 100, 0.6);
    padding: 20px;
}

重要的是 rgba(100, 100, 100, 0.6); 行。 0.6 是框的不透明度。

HTML/CSS 的透明盒子？

Transparent Box with HTML/CSS?

html

css

transparent