Change opacity of background colour, but not text [duplicate]

up vote
0
down vote

favorite

This question already has an answer here:

How do I give text or an image a transparent background using CSS?

28 answers

I am trying to make the background less opaque but have the colour of the text remain the same.

.overview {

  background: gray;

  width: 45%;

  opacity: 0.3;

  margin-left: auto;

  margin-right: auto;

  font-size: large;

  border-radius: 8px;

}



.overview p {

  text-align: center;

  color: white;

}

<div id="overview" class="overview">

  <p>

    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



  </p>

</div>

However both the text and background colour become dimmer

edited Nov 15 at 18:44

Smollet777

1,163915

asked Nov 15 at 18:24

wtreston

577213

marked as duplicate by Turnip css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 at 18:35

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

up vote
0
down vote

favorite

This question already has an answer here:

How do I give text or an image a transparent background using CSS?

28 answers

I am trying to make the background less opaque but have the colour of the text remain the same.

.overview {

  background: gray;

  width: 45%;

  opacity: 0.3;

  margin-left: auto;

  margin-right: auto;

  font-size: large;

  border-radius: 8px;

}



.overview p {

  text-align: center;

  color: white;

}

<div id="overview" class="overview">

  <p>

    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



  </p>

</div>

However both the text and background colour become dimmer

edited Nov 15 at 18:44

Smollet777

1,163915

asked Nov 15 at 18:24

wtreston

577213

marked as duplicate by Turnip css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 at 18:35

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

up vote
0
down vote

favorite

This question already has an answer here:

How do I give text or an image a transparent background using CSS?

28 answers

I am trying to make the background less opaque but have the colour of the text remain the same.

.overview {

  background: gray;

  width: 45%;

  opacity: 0.3;

  margin-left: auto;

  margin-right: auto;

  font-size: large;

  border-radius: 8px;

}



.overview p {

  text-align: center;

  color: white;

}

<div id="overview" class="overview">

  <p>

    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



  </p>

</div>

However both the text and background colour become dimmer

edited Nov 15 at 18:44

Smollet777

1,163915

asked Nov 15 at 18:24

wtreston

577213

This question already has an answer here:

How do I give text or an image a transparent background using CSS?

28 answers

I am trying to make the background less opaque but have the colour of the text remain the same.

.overview {

  background: gray;

  width: 45%;

  opacity: 0.3;

  margin-left: auto;

  margin-right: auto;

  font-size: large;

  border-radius: 8px;

}



.overview p {

  text-align: center;

  color: white;

}

<div id="overview" class="overview">

  <p>

    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



  </p>

</div>

However both the text and background colour become dimmer

This question already has an answer here:

How do I give text or an image a transparent background using CSS?

28 answers

.overview {

  background: gray;

  width: 45%;

  opacity: 0.3;

  margin-left: auto;

  margin-right: auto;

  font-size: large;

  border-radius: 8px;

}



.overview p {

  text-align: center;

  color: white;

}

<div id="overview" class="overview">

  <p>

    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



  </p>

</div>

.overview {

  background: gray;

  width: 45%;

  opacity: 0.3;

  margin-left: auto;

  margin-right: auto;

  font-size: large;

  border-radius: 8px;

}



.overview p {

  text-align: center;

  color: white;

}

<div id="overview" class="overview">

  <p>

    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



  </p>

</div>

html css

edited Nov 15 at 18:44

Smollet777

1,163915

asked Nov 15 at 18:24

wtreston

577213

edited Nov 15 at 18:44

Smollet777

1,163915

asked Nov 15 at 18:24

wtreston

577213

edited Nov 15 at 18:44

Smollet777

1,163915

edited Nov 15 at 18:44

Smollet777

1,163915

edited Nov 15 at 18:44

Smollet777

1,163915

asked Nov 15 at 18:24

wtreston

577213

asked Nov 15 at 18:24

wtreston

577213

asked Nov 15 at 18:24

wtreston

577213

marked as duplicate by Turnip css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 at 18:35

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Turnip css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 at 18:35

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

2 Answers
2

active

oldest

votes

up vote
4
down vote

Your background should be an RGBA color, applying opacity is for the div

background-color:rgba(128,128,128,0.3);

edited Nov 15 at 21:42

Zechariah Raman

127

answered Nov 15 at 18:27

Nickfmc

34616

add a comment |

up vote
0
down vote

@wtreston
The following code should be:

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

I may have misunderstood your question.

Hope This helps!

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
4
down vote

Your background should be an RGBA color, applying opacity is for the div

background-color:rgba(128,128,128,0.3);

edited Nov 15 at 21:42

Zechariah Raman

127

answered Nov 15 at 18:27

Nickfmc

34616

add a comment |

up vote
4
down vote

Your background should be an RGBA color, applying opacity is for the div

background-color:rgba(128,128,128,0.3);

edited Nov 15 at 21:42

Zechariah Raman

127

answered Nov 15 at 18:27

Nickfmc

34616

add a comment |

up vote
4
down vote

Your background should be an RGBA color, applying opacity is for the div

background-color:rgba(128,128,128,0.3);

edited Nov 15 at 21:42

Zechariah Raman

127

answered Nov 15 at 18:27

Nickfmc

34616

Your background should be an RGBA color, applying opacity is for the div

background-color:rgba(128,128,128,0.3);

edited Nov 15 at 21:42

Zechariah Raman

127

answered Nov 15 at 18:27

Nickfmc

34616

edited Nov 15 at 21:42

Zechariah Raman

127

edited Nov 15 at 21:42

Zechariah Raman

127

edited Nov 15 at 21:42

Zechariah Raman

127

answered Nov 15 at 18:27

Nickfmc

34616

answered Nov 15 at 18:27

Nickfmc

34616

answered Nov 15 at 18:27

Nickfmc

34616

add a comment |

up vote
0
down vote

@wtreston
The following code should be:

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

I may have misunderstood your question.

Hope This helps!

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

add a comment |

up vote
0
down vote

@wtreston
The following code should be:

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

I may have misunderstood your question.

Hope This helps!

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

add a comment |

up vote
0
down vote

@wtreston
The following code should be:

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

I may have misunderstood your question.

Hope This helps!

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

@wtreston
The following code should be:

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

I may have misunderstood your question.

Hope This helps!

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

.overview {

    background: gray;

    width: 45%;

    opacity: 0.3%;

    margin-left: auto;

    margin-right: auto;

    font-size: large;

    border-radius: 8px;



}



.overview p {

    text-align: center;

    color: white;

}

<div id="overview" class="overview">

        <p>

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah



        </p>

    </div>

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

answered Nov 15 at 18:28

PIZZZZZZZZZZZA is here

615

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky