Change opacity of background colour, but not text [duplicate]
Multi tool use
0
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
html css
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
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 |
0
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
html css
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
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 |
0
0
0
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
html css
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
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
html css
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
edited Nov 15 '18 at 18:44
Smollet777
1,36011015
1,36011015
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
asked Nov 15 '18 at 18:24
wtrestonwtreston
570213
570213
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 |
add a comment |
2 Answers
2
active
oldest
votes
4
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
NickfmcNickfmc
34617
add a comment |
0
@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 herePIZZZZZZZZZZZA is here
798
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
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
NickfmcNickfmc
34617
add a comment |
4
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
NickfmcNickfmc
34617
add a comment |
4
4
4
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
NickfmcNickfmc
34617
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
NickfmcNickfmc
34617
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
1217
answered Nov 15 '18 at 18:27
NickfmcNickfmc
34617
answered Nov 15 '18 at 18:27
NickfmcNickfmc
34617
answered Nov 15 '18 at 18:27
NickfmcNickfmc
34617
34617
add a comment |
add a comment |
0
@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 herePIZZZZZZZZZZZA is here
798
add a comment |
0
@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 herePIZZZZZZZZZZZA is here
798
add a comment |
0
0
0
@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 herePIZZZZZZZZZZZA is here
798
@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 herePIZZZZZZZZZZZA is here
798
answered Nov 15 '18 at 18:28
PIZZZZZZZZZZZA is herePIZZZZZZZZZZZA is here
798
answered Nov 15 '18 at 18:28
PIZZZZZZZZZZZA is herePIZZZZZZZZZZZA is here
798
answered Nov 15 '18 at 18:28
PIZZZZZZZZZZZA is herePIZZZZZZZZZZZA is here
798
798
add a comment |
add a comment |
ZI2Pp QQ1 awAnq yi4LT3,69CKeHWc Aqc7moCclqBlLHf,4mdZP
