CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Criss
Criss

Reputation: 85

Image inside transparent background-color without being affected

What i want to do is to make a background-color (with opacity) inside a image, there's a way that i can achieve this without being affected by the background-color? The problem here is the background-color with opacity, it makes everything transparent, including the text and the image.
Here's my code:

CSS 

div.Image {
  background: url("http://fc07.deviantart.net/fs43/i/2009/141/e/e/Vista_orb_by_fediaFedia.png")center center no-repeat;
  background-size: 40px 40px;
  position: relative;
  background-position: 50% 0px;
}
div.trans-bg {
  background-color: #646464;
  opacity: 0.5;
  border-radius: 3px;
  border: 2px ridge #7AC3D1;
  position: absolute;
}
div.trans-bg p {
  text-shadow: 1px 2px 2px #000;
  margin: 5%;
  padding-top: 45px;
  width: 100px;
  color: #fff;
  text-align: center;
}
<div class="trans-bg">
  <div class="Image">
    <p>Windows 7</p>
  </div>
</div>

http://jsfiddle.net/c3ja7rjn/

Upvotes: 0

Views: 131

Answers (2)

Konrud
Konrud

Reputation: 1114

Try to use rgba instead of the opacity.

background-color: rgba(100, 100, 100, 0.29);

Opacity changes everything contained in the block-level element, whereas setting the opacity with RGBA changes the opacity of the element itself.

Upvotes: 1

Eddie Roman
Eddie Roman

Reputation: 45

First. Youll also want to remove the opactity on the parent div. This will affect all child divs. This is why the BG color on the image div is affected.

    div.trans-bg {
  background-color: #646464;
  opacity: 0.5;
  border-radius: 3px;
  border: 2px ridge #7AC3D1;
  position: absolute;
  }

Next, youll want to use background-color to set the color without affecting the image BG css on the image div.

background-color: #000;

Upvotes: 0

Related Questions