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

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 '18 at 18:44

Smollet777

1,36811015

asked Nov 15 '18 at 18:24

wtreston

585214

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 '18 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 |

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 '18 at 18:44

Smollet777

1,36811015

asked Nov 15 '18 at 18:24

wtreston

585214

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 '18 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 |

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 '18 at 18:44

Smollet777

1,36811015

asked Nov 15 '18 at 18:24

wtreston

585214

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 '18 at 18:44

Smollet777

1,36811015

asked Nov 15 '18 at 18:24

wtreston

585214

edited Nov 15 '18 at 18:44

Smollet777

1,36811015

asked Nov 15 '18 at 18:24

wtreston

585214

edited Nov 15 '18 at 18:44

Smollet777

1,36811015

edited Nov 15 '18 at 18:44

Smollet777

1,36811015

edited Nov 15 '18 at 18:44

Smollet777

1,36811015

asked Nov 15 '18 at 18:24

wtreston

585214

asked Nov 15 '18 at 18:24

wtreston

585214

asked Nov 15 '18 at 18:24

wtreston

585214

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 '18 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 '18 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

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

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

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

answered Nov 15 '18 at 18:27

Nickfmc

34618

add a comment |

@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 '18 at 18:28

PIZZZZZZZZZZZA is here

778

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

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

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

answered Nov 15 '18 at 18:27

Nickfmc

34618

add a comment |

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

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

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

answered Nov 15 '18 at 18:27

Nickfmc

34618

add a comment |

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

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

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

answered Nov 15 '18 at 18:27

Nickfmc

34618

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

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

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

answered Nov 15 '18 at 18:27

Nickfmc

34618

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

edited Nov 15 '18 at 21:42

Zechariah Raman

1217

answered Nov 15 '18 at 18:27

Nickfmc

34618

answered Nov 15 '18 at 18:27

Nickfmc

34618

answered Nov 15 '18 at 18:27

Nickfmc

34618

add a comment |

@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 '18 at 18:28

PIZZZZZZZZZZZA is here

778

add a comment |

@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 '18 at 18:28

PIZZZZZZZZZZZA is here

778

add a comment |

@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 '18 at 18:28

PIZZZZZZZZZZZA is here

778

@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 '18 at 18:28

PIZZZZZZZZZZZA is here

778

answered Nov 15 '18 at 18:28

PIZZZZZZZZZZZA is here

778

answered Nov 15 '18 at 18:28

PIZZZZZZZZZZZA is here

778

answered Nov 15 '18 at 18:28

PIZZZZZZZZZZZA is here

778

add a comment |

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

搜尋此網誌

Odtnhj