how to make Background color transparent [duplicate]

This question already has an answer here:

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

28 answers

How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>


#border101 
border: 10px solid silver; 
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; 
height: 650px; 
background-color: #C64CD5;

edited Nov 11 at 6:27

DPS

491212

asked Nov 11 at 6:11

Richard Cooper

marked as duplicate by Temani Afif 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 11 at 9:32

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.

they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12

i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14

any idea how to do that
– Richard Cooper
Nov 11 at 6:16

Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21

@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28

|
show 3 more comments

This question already has an answer here:

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

28 answers

How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>


#border101 
border: 10px solid silver; 
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; 
height: 650px; 
background-color: #C64CD5;

edited Nov 11 at 6:27

DPS

491212

asked Nov 11 at 6:11

Richard Cooper

marked as duplicate by Temani Afif 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 11 at 9:32

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.

they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12

i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14

any idea how to do that
– Richard Cooper
Nov 11 at 6:16

Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21

@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28

|
show 3 more comments

This question already has an answer here:

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

28 answers

How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>


#border101 
border: 10px solid silver; 
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; 
height: 650px; 
background-color: #C64CD5;

edited Nov 11 at 6:27

DPS

491212

asked Nov 11 at 6:11

Richard Cooper

This question already has an answer here:

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

28 answers

How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>


#border101 
border: 10px solid silver; 
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; 
height: 650px; 
background-color: #C64CD5;

This question already has an answer here:

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

28 answers

css

edited Nov 11 at 6:27

DPS

491212

asked Nov 11 at 6:11

Richard Cooper

edited Nov 11 at 6:27

DPS

491212

asked Nov 11 at 6:11

Richard Cooper

edited Nov 11 at 6:27

DPS

491212

edited Nov 11 at 6:27

DPS

491212

edited Nov 11 at 6:27

DPS

491212

asked Nov 11 at 6:11

Richard Cooper

asked Nov 11 at 6:11

Richard Cooper

asked Nov 11 at 6:11

Richard Cooper

marked as duplicate by Temani Afif 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 11 at 9:32

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 Temani Afif 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 11 at 9:32

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.

they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12

i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14

any idea how to do that
– Richard Cooper
Nov 11 at 6:16

Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21

@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28

|
show 3 more comments

they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12

i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14

any idea how to do that
– Richard Cooper
Nov 11 at 6:16

Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21

@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28

they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12

i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14

any idea how to do that
– Richard Cooper
Nov 11 at 6:16

Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21

@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28

|
show 3 more comments

2 Answers
2

active

oldest

votes

Set opacity to background by using rgba (a is the opacity)

I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

answered Nov 11 at 6:32

לבני מלכה

9,1061525

add a comment |

use this color

background-color:#ff341140;

last two number in color code is for transparency here is 40

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Set opacity to background by using rgba (a is the opacity)

I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

answered Nov 11 at 6:32

לבני מלכה

9,1061525

add a comment |

Set opacity to background by using rgba (a is the opacity)

I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

answered Nov 11 at 6:32

לבני מלכה

9,1061525

add a comment |

Set opacity to background by using rgba (a is the opacity)

I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

answered Nov 11 at 6:32

לבני מלכה

9,1061525

Set opacity to background by using rgba (a is the opacity)

I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

#border101 
border: 10px solid silver;
margin-left: 100px; 
margin-right: 100px; 
border-radius: 30px 30px 30px 30px; 
margin-top:30px; height: 650px; 
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
 <center><img src="img/logo.jpg" height="120px"></center>
 <hr> 
 <p style="background-color: white; font-size: 20px;" align="left"> 
 Welcome to cryptofreeonline.ga we have many site in different formats. 
 We made this site with some basic help from the owners over at 
 <a href="blackccgen.ga">Blackccgen</a>
 </p> 
</div>

answered Nov 11 at 6:32

לבני מלכה

9,1061525

answered Nov 11 at 6:32

לבני מלכה

9,1061525

answered Nov 11 at 6:32

לבני מלכה

9,1061525

answered Nov 11 at 6:32

לבני מלכה

9,1061525

add a comment |

use this color

background-color:#ff341140;

last two number in color code is for transparency here is 40

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

add a comment |

use this color

background-color:#ff341140;

last two number in color code is for transparency here is 40

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

add a comment |

use this color

background-color:#ff341140;

last two number in color code is for transparency here is 40

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

use this color

background-color:#ff341140;

last two number in color code is for transparency here is 40

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

answered Nov 11 at 9:07

shaghayegh sheykholeslami

1837

add a comment |

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

搜尋此網誌

Pfthb