Почему с прозрачным фоном текст тоже становится прозрачным?

[Krasi]

https://tfeya.ru/allprojects_stat.php

Вот с этой страницей играюсь, прошу посмотреть, что с кодом не так. Посмотрите, у меня есть элемент "Статистика по проектам", которому я задал свойства

        .widgetRamka{
            margin: 7px 15px; padding: 15px 10px; border: 2px double #7bdcc0; border-radius: 8px;
            position:relative;z-index:-1;background:white;opacity:0.4;
        }

В этом элементе находится содержимое (текст), которое не должно быть прозрачным. Сам <div> с классом "widgetRamka" - элемент флексбокса, то есть ему нельзя прописать абсолютное значение по моей логике, или же предлагайте.

Я попробовал у обоих элементов прописать z-index и position:relative, но видимо что-то делаю не так. Текст не хочет все таки быть непрозрачным, он словно лежит под полупрозрачным .widgetRamka, что бы я ни делал. Как правильно это решить?

[Krasi]

background: linear-gradient(90deg, rgba(220,220,220,0.2), rgba(220,220,220,.4)); это вместо opacity решило вопрос. Но подскажите какие тут были еще варианты

[Agency]

opacity делает прозрачным весь блок, со всем его содержимым, что туда не воткни, хоть текст, хоть картинку