PLs help... Html and CSS problem...

programming web dev
1

i create a dashboard and i opacity it… I don’t wan my word have opacity effect how to do it… pls help

Dashboard

2

Dashboard position: relative, overlay with text content position: absolute. Do not nest the overlay within the Dashboard element. You can also do the opposite and use z-index to lower the Dashboard. If using positioning is not working with your layout then try out display: grid to build your containing areas.

1 Like
3

got example or code to show? because i’m still a newbies … pls

4

Paste the following code into an html file you create. With the developer inspector tools in your browser you can see that all three ‘dashboard’ areas have all their content set by css opacity. The first one is what you may have experienced as you set up your html. All children of a parent element will be affected by the parent’s opacity. The 2nd uses css position properties, and the 3rd uses css grid layout. The text is not a child of the transparent div though with css the position can be controlled. Hope this helps :slight_smile:

  * {box-sizing: border-box;}
  body {
    padding: 24px;
    text-align: center;
    color: black;
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
  }
  h4, p {
    margin-top: 0
  }
  .box {
    background-color: green;
    height: 165px;
    width: 165px;
    margin: 0 auto;}
  p {
    width: 165px;
  }
  .dashboard  {
    border: 2px solid;
    opacity: 0.25;
    height: 250px;
    width:100%;
    padding: 24px;
    background-color: orange;
  }
  .position-rel {
    position: relative;
  }
  .position-absol {
    position: absolute;
    margin: 0 auto;
    top: 24px;
    left: calc(50% - 82.5px);
  }
  .the-grid {
    display: grid;
    grid-template-columns: 1fr 165px 1fr;
    grid-template-rows: 30px 250px;
  }
  .grid-dash {
    grid-column: 1 / -1;
    grid-row: 1 / 2
  }
  .grid-p {
    grid-column: 2;
    grid-row:  2;
  }

<body>
  <h4>Opacity and position</h4>
  <div class="dashboard">
    <div class="box">
      <p>
        Dashboard One
      </p>
    </div>
  </div>
  <div class="position-rel">
    <div class="dashboard">
      <div class="box">
      </div>
    </div>
    <p class="position-absol">
      Dashboard Two
    </p>
  </div>
  <div class=" the-grid">
    <div class="dashboard grid-dash">
      <div class="box">
      </div>
    </div>
    <p class="grid-p">
      Dashboard Three
    </p>
  </div>
</body>
2 Likes
5

thx you:star_struck: really help me a lot

2 Likes