how to make Background color transparent

Question

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; 
}

they use `background-image` what do you mean `background color partially`? — לבני מלכה, Nov 11 '18 at 06: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 '18 at 06:14
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 https://meta.stackoverflow.com/questions/374700/why-do-people-post-code-as-images — quant, Nov 11 '18 at 06:21
@RichardCooper that what you mean?https://jsfiddle.net/7k8tshLy/ — לבני מלכה, Nov 11 '18 at 06:28
i cant actually mark this as finished because you didnt put that as a answer — Richard Cooper, Nov 11 '18 at 06:30

score 1 · Accepted Answer · answered Nov 11 '18 at 06:32

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>

score 0 · Answer 2 · answered Nov 11 '18 at 09:07

0

use this color

background-color:#ff341140;

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

answered Nov 11 '18 at 09:07

shaghayegh sheykholeslami

310
1
11

how to make Background color transparent

2 Answers2