How can I change opacity on a three column layout

Asked May 15 '20 at 14:28

Active May 15 '20 at 14:28

Viewed 25 times

So I am doing a basic html site, and I use a three columns layout, but I don't want the background of the columns to be opaque. How can I change the transparency? Here is a relevant part of the code:

<div class="row">
    <div class="column left" style="background-color:#aaa">
       <h2>Column 1</h2>
       <p>Some text..</p>
   </div>
   <div class="column middle" style="background-color:#bbb">
           <h2>Column 2</h2>
           <p>Some text..</p>
   </div>
   <div class="column right" style="background-color:#ccc;">
          <h2>Column 3</h2>
          <p>Some text..</p>
  </div>
</div>

asked May 15 '20 at 14:28

5

`style="background-color:rgba(0,0,0,0.5);"` – Prikesh Savla May 15 '20 at 14:31
What do you mean by changing the opacity here is it the background or is it whole `row` with the text inside it? – ROOT May 15 '20 at 14:40
Thanks, that was what I needed – May 15 '20 at 14:41
instead of '#333' colors you can use rgba() in css https://www.w3schools.com/cssref/func_rgba.asp – Prikesh Savla May 15 '20 at 14:41
Btw, **don't use inline styles** other than for quick testing purposes. – connexo May 15 '20 at 14:56

How can I change opacity on a three column layout

0 Answers0