1 answers

0 points

Asked by:

688

Is it possible to set the background of an element to partly transparent but have the content (text & images) of the element fully visible?

I was trying opacity: 50% but I don't want the text to be affected by it:

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .transparent {
        background: red;
        opacity: 50%;
    }
​
  </style>
</head>
<body>
  <p class="transparent">
    <span>Some text here...</span>
  </p>
</body>
</html>

Auto running

1 answer

0 points

Answered by:

Admin Dirask Community

4380

You can use rgba colors, which works like rgb but the fourth parameter a (alpha) is a number between 0 and 1 (or a percentage value) that sets the opacity. The number 1 corresponds to 100% (full opacity) and 0 makes the element invisible.

Quick solution:

xxxxxxxxxx
 
background-color: rgba(255, 0, 0, 0.5); /* sets element color to red with opacity: 50% */

Practical example

1. Using HTML style attribute

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
   <p style="background-color: rgba(255, 0, 0, 0.5);">
     <span>Some text here...</span>
   </p>
</body>
</html>

Auto running

2. Using CSS

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .transparent-background {
        background: rgba(255, 0, 0, 0.5);
    }
​
  </style>
</head>
<body>
  <p class="transparent-background">
    <span>Some text here...</span>
  </p>
</body>
</html>

Auto running

Working with images

Analogically, when you are working with images, you need to set the image container background to rgba color with some opacity.

1. Using HTML style attribute

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div style="background-color: rgba(255, 0, 0, 0.5);">
    <img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" width="100px" />
  </div>
</body>
</html>

Auto running

2. Using CSS

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .transparent-background {
        background: rgba(255, 0, 0, 0.5);
    }
​
  </style>
</head>
<body>
  <div class="transparent-background">
    <img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" width="100px" />
  </div>
</body>
</html>