opacity affects everything inside it

Question

React beginner here, here i'm changing the background color of rows(which works) and also giving opacity: 0.3, which gives opacity to everything to that specific row, i want to give that opacity just to background-color and not anything else.

 <Table
        bordered
        columns={columns}
        dataSource={this.data}
        rowClassName={(record, index) => (record.amount > 50 ? "purple" : "green")}
      />

css:

.purple{
background-color: rgba(190, 144, 212, 0.2) !important;
  opacity: 0.05;}

.green {
   color :green; 
}

data:

data = [
    {
      key: 0,
      date: "2018-02-11",
      amount: 40,
      type: "income",
      note: "transfer"
    },
    {
      key: 1,
      date: "2018-03-11",
      amount: 243,
      type: "income",
      note: "transfer"
    },
    {
      key: 2,
      date: "2018-04-11",
      amount: 98,
      type: "income",
      note: "transfer"
    }
    ];

Does this answer your question? [How do I give text or an image a transparent background using CSS?](https://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — Sinan Yaman, Jun 07 '21 at 14:36

score 2 · Answer 1 · answered Jun 07 '21 at 14:32

2

opacity is supposed to effect the entire element.

If you want to lower the opacity of just the background, then make the 4th value you pass to rgba() smaller and don't add opacity.

answered Jun 07 '21 at 14:32

Quentin

914,110
126
1,211
1,335

score 1 · Answer 2 · answered Jun 07 '21 at 14:45

1

No need to use opacity:

.purple{
    background-color: rgba(190, 144, 212, 0.01) !important;
}

Or shorter version:

.purple{
    background-color:#be90d403;
}

answered Jun 07 '21 at 14:45

Webfeya

163
1
5

opacity affects everything inside it

2 Answers2