Opacity of div backgrounds

Language Help CSS
1

Hello,

I’m new to coding and I’m a little lost on a certain part. I would like to accomplish the following but i can’t figure out how to change the opacity of the background while leaving the text/image normal. (the following was made in an adobe program)

example

Currently i have the following code:

  1. (
    )- Doesn’t like some of my code meant to have (div class=“container” inside <>)
  2. <img src="logo.gif"/>

  3. </div>

  4. <div>

with the following in my CSS doc:

  1. .container {
  2. background-color:EFF6E5;

  3. padding: 75px;

  4. opacity:.5;

}

Would it be better to make the text/image with the opaque background then pulled it in instead?

2

Set the image in a CSS background, rather than an img tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overlay</title>
<style>
body {
    font-size: 100%;
}
.parent {
    height: 240px;
    background: #FEB355 url(bg.png) 0% 0%;
}
.child {
    position: relative;
    top: 60px;
    height: 120px;
    background-color: rgba(239, 246, 229, 0.6);
}
.grand-child {
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-size: 3em;
    color: #012CAA;
    background: transparent;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <div class="grand-child">
      <h2>Hello World!</h2>
    </div>
  </div>
</div>
</body>
</html>

Save the above to your machine and open it in a browser. We have three distinct layers. The parent, the child, and the grandchild. Parent gets the background image; child gets the background opacity, and the grandchild gets the font color.

3

Thank you. I will look at this now.

4

You’re welcome.

There is a proviso… There may be ways to do this with less structure. That is a sort of experiment to embark upon when you have a weekend to spend reading and tinkering. I did the above because it was the fast and dirty way to accomplish the desired effect.

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.