Прозрачная коробка с HTML/CSS?

Question

Я хочу сделать прозрачным окно с содержимым внутри него с изображением ниже ..

Я понятия не имею, о создании этого. Должен ли я использовать методы HTML5? Не могли бы вы мне помочь в создании этой коробки?

Answer 1

Использование rgba() для background-color и контролировать прозрачность, изменяя альфа значение (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 2

Вы можете просто использует фоновое изображение:

HTML

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

значения CSS

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

EXAMPLE

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 в качестве цвета фона.

background: 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 - непрозрачность коробки.