1

I want to make a transparent box with content inside it with the image below..

example image

I have no idea about creating this. Should I use HTML5 techniques? Would you please give me some help about creating this box?

mbschenkel
  • 1,865
  • 1
  • 18
  • 40
Jerry
  • 13
  • 1
  • 1
  • 4

5 Answers5

4

Use rgba() values for background-color and control the opacity by changing the alpha value(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>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
1

Try something like this: 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;
}

The important thing is the rgba(100, 100, 100, 0.6); line. 0.6 is the box's opacity.

Max Klein
  • 468
  • 1
  • 6
  • 22
0

You can just uses a background image:

HTML 

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

CSS

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

EXAMPLE

jmore009
  • 12,863
  • 1
  • 19
  • 34
0

You can use opacity property

div {
    opacity: 0.5;
}

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

or you can make only background transparent with rgba background color:

div {
    background-color: rgba(255, 0, 255, 0.5);
}
Ján Stibila
  • 619
  • 3
  • 12
  • 1
    if you are using opacity the content inside will also get the opacity you will need to use 2 different elements or pseudo element – Vitorino fernandes Jan 10 '15 at 15:45
  • this is why I include 'only background opacity' option in my answer. I know that this do not include transparent image bg, but I am lazy googling and did't memorize all css possibilities. – Ján Stibila Jan 10 '15 at 15:58
0

Use rgba as a background color.

background: rgba(30, 30, 30, 0.5) will give the background the color rgb(30,30,30) and an opacity of 0.5.

Just play a bit with the last value.