-1

I understand that this question may have been answered before, but I am having trouble, only setting the opacity to the background (container), but not the text, but when i set the opacity on the container, then it also sets it on the text.

I have tried researching on google and even on here, but nothing seems to work

html

<div class="container">
        <div class="test">
            <div class="title">
                <h3>"The Rising Dead"</h3>
            </div>
        </div>
    </div>

css

.container{
    background-color: rgba(255, 0, 0);
    opacity: 0.5;
    width: 1350px;
    margin-left: 280px;
    height: 500px;
}
.title h3{
    opacity: 7;
}

Screenshot:

https://imgur.com/rATgSiz

Any help appreciated and thanks in advance
JackD155
  • 35
  • 1
  • 5
  • not sure how you did your seach. Google your title and you will get this question as the first result: https://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it – Temani Afif Sep 20 '19 at 15:22
  • I seen that question and tried it and it did not resolve the issue – JackD155 Sep 20 '19 at 15:44
  • I don't see anything in your code showing one solution from that question. – Temani Afif Sep 20 '19 at 15:46

1 Answers1

0

rgba has opacity itself, it's 4th parameter:

rgba(255, 0, 0, 0.5)
demkovych
  • 7,827
  • 3
  • 19
  • 25