I want the background of the element div to be translucent

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<div>Some text heere just text and nothing more</div>

</body>
<style>
    div {
        background: black;
        color: white;
    }
</style>
</html>

Its maybe easy question. I just want background be translucent. If I will write opacity 0.5 text will be translucent too I don't need.

ATP · Accepted Answer · 2021-01-20T13:45:03.677

1

You can use the rgba() function:

R - red value 0-255
G - green value 0-255
B - blue value 0-255
A - alpha (opacity) value 0-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<div>Some text heere just text and nothing more</div>

</body>
<style>
    div {
        background: rgba(0,0,0,0.5); //since black rgb is 0,0,0
        color: white;
    }
</style>
</html>

edited Jan 20 '21 at 13:45

answered Jan 20 '21 at 13:40

ATP

2,939
4
13
34

I need to wait 5 minutes – Fer Fooy Jan 20 '21 at 13:49

Jaysmito Mukherjee · Answer 2 · 2021-01-20T13:45:00.190

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <div>Some text heere just text and nothing more</div>

</body>
<style>
  div {
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
</style>

</html>

Here I used rgba to set background color instead of just the name so the last value specifies alpha!

And incase of image use something like this :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <div>Some text heere just text and nothing more</div>

</body>
<style>
  div {
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
  }
  
  div::after {
    content: "";
    background: url(https://picsum.photos/200/300);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }
</style>

</html>

if its hover a background-image, you can use an inset shadow instead an extra container : https://stackoverflow.com/questions/65801149/cell-background-filter-without-filtering-cell-content/65801173#65801173 ;) — G-Cyrillus, Jan 20 '21 at 13:49

I want the background of the element div to be translucent

2 Answers2