How to create transparent background color in html & css [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

I was creating a website which has menu and has a class topbar and has white background and i want to make it transperent not fully but still i can see a whit color i am using a dreamweaver so how do I do it

<html>
<head>
<title></title>
<style type="text/css">
a{
text-decoration:none;
color:black;
}
a:hover{
text-decoration:underline;
}
ul{
list-style:none;

}
li{
float:left;
font-size:20px;
padding-left:10px;

}
.background{
margin:0;
background-image:url("MWYLJ6SRDM.jpg");
background-size:1380px  auto;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

}
.topbar{
background-color:white;
height:50px;
width:100%;
color:black;
position:fixed;
z-index:1;
}

</style>
</head>
<body class="background">
<div class="topbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</body>
</html>


Solution :

You can use:

background-color:rgba(255, 255, 255, 0.5);

The "0.5" value in example means opacity value and you can adjust transparency in there. Other values means RGB values, so you can adjust background color with them.

If you want to work with hex values, you may use this technique.


    CSS Howto..

    How-to mix fixed and percentage heights/width using css without javascript

    How do I make a CSS sprite that controls multiple background images for multiple DIV's?

    How to prevent html div from expanding when text size is changed

    How to prevent selecting text on double click?

    How to center the image source within an image tag?

    How to convert 1 column records of dynamic table into hyperlink

    How to set a External SVG color in HTML using CSS?

    Show background image out of the div [closed]

    How to hide specific TD borders in a TABLE using CSS

    How to make a floating page div responsive

    How to have two sub-divs the same height as each other

    jquery easyui TreeGrid: How to make only Column Headers Bold

    CSS: how can I hide a div when its text doesn't fit?

    CSS how to vertically align text within a pseudo element

    Django. how to apply css style on boolean form field?

    Am centering content vertically using css, how to remove empty space?

    How to add css class in aspx.cs page means code behind page

    How to draw diagonal lines with css [duplicate]

    How to prevent page jump when using # href to swap gallery images using a div ID?

    How to fit img into div circle ?

    How to avoid overlapping between two divs positioning absolute inside a div positioning relative?

    What is the purpose of this csslint error and how can I get rid of it?

    wordpress submenu css show on parent active and child active

    How to display random parts of a page on refresh?

    HTML/CSS How to connect a list to h tag and word-spacing

    how to remove and add css class to a specific textbox inside gridview in c# asp.net?

    CSS: How to specify table's height such that a vertical scroll bar appears?

    How to change ListView cell's text color in JavaFX using css

    Simple Form button submit doesn't show in IE 8-7

    how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?