Translucent effect to section of webpage

Question

I have a background image for my webpage and I have this

HTML:

<body>
    <div class="front">
         <p>Hello World</p>
    </div>
</body>

CSS:

.front{
    background-color:silver;
    height:200px;
    width:200px;
}

The width & height of div is 200px,200px.I want the area covered by the div element to be translucent ie. showing the blur background, but the text that div contains should be clear as well. How do I do that?

score 2 · Answer 1 · edited Dec 23 '15 at 08:59

2

You need a rgba background:

background-color: rgba(192,192,192,0.5);

Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color. a means opacity: 0=transparent; 1=opaque;

edited Dec 23 '15 at 08:59

Ivanka Todorova

9,964
16
66
103

answered Dec 23 '15 at 08:57

yunzen

32,854
11
73
106

should really have an rgb fallback in case rgba isn't supported by the browser – luke_mclachlan Dec 23 '15 at 09:06
1

Yeah, and a fallback for people who don't have a browser. ;) – yunzen Dec 23 '15 at 09:08

score 1 · Answer 2 · answered Dec 23 '15 at 09:01

1

You could simply add opacity: 0.5; to your css class.

answered Dec 23 '15 at 09:01

Philipp

4,180
7
27
41

Dyrandz Famador · Answer 3 · 2015-12-23T09:32:26.843

you can use opacity for the background-image and use before Selector to remain the opacity of the text:

like this:

.front {
  z-index: 1;
}
.front:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.4;
  filter: alpha(opacity=40);
  height: 200px;
  width: 200px;
}
.font > p {
  z-index: -1;
  opacity: 1;
  filter: alpha(opacity=100);
}

<div class="front">
  <p>Hello World</p>
</div>

JSFIDDLE DEMO

score 1 · Answer 4 · answered Dec 23 '15 at 09:10

You can use the rgba for the background image since adding opacity would apply it for the text in the div also.

background-color: rgba(192,192,192,0.5);

but this is not supported in IE.

So you can have a transparent background image created and applied using background-image property.

score 0 · Answer 5 · answered Dec 23 '15 at 09:01

0

try this css :

.front{
     background-color:silver;
    height:200px;
    width:200px;
    opacity: 0.4;
}

Increase or decrease opacity according to your choice.

answered Dec 23 '15 at 09:01

Amitesh Kumar

3,051
1
26
42

score 0 · Answer 6 · answered Dec 23 '15 at 09:06

0

Using opacity in CSS is the easiest way.

answered Dec 23 '15 at 09:06

score 0 · Answer 7 · answered Dec 23 '15 at 09:07

Well, little out of the box, you can really blur your image if you try a little different mark-up.

Here it goes

.front{
    background-color:silver;
    height:200px;
    width:200px;
     -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}
.back{
  position: absolute;
  top: 0;
}

<body>
  <div class="front"></div>
  <div class="back">
    <p>Hello World</p>
  </div>
</body>

Translucent effect to section of webpage

7 Answers7