Working template of the site: https://codesandbox.io/s/blue-currying-3me1t
my <h1> and <h2> elements in Header.js have the background-color: #000000; property set. When the particles pass through the area that the headers are in, they are completely obscured by this background color.
How do I make the background color of the headers transparent? I want to be able to see the particles passing through the region as to maintain context.
The intended effect looks like the image below although I am trying to maintain the area in between the two headers being blur free.
Why don't you pass the header (assumming You only need the header to be transparent),
opacity: .5;
/* Or, */
background-color: rgba(0, 0, 0, .5);
You might need to add some shadows and so on stuff to give that thing a transparent feel.
Related
I want to increase the transparency of the image and top menu after I scroll and the logo in the header changes to small. Can anyone help?
Here is the site url: https://theportwebdesign.com/
The et-fixed-header class is appended to #top-header when your scroll. I assume a JS script is taking care of this.
To change the opacity add this line to your CSS or modifying existing. You should probably be able to change this is your theme settings somewhere, if not you are most likely going to have to use !important as it looks like most of your CSS is written directly to the screen.
.et-fixed-header#main-header{
background-color: rgba(0,0,0,0.8) !important;
}
The first three numbers are used for color and the last is used for opacity.
You need to change the color value of header (div) from RGB to RGBA onscroll event
<div id="logo" style='width:1024px;height:50px;'></div>
<script>
document.getElementById("logo").addEventListener("scroll", modifyHeader);
function modifyHeader()
{
document.getElementById('logo').style.backgroundColor="rgba(255, 255, 255, 0.3)"; // This is RGBA color value which makes your div transparent
}
</script>
Is it possible to program CSS's background with raw values for both its background background-color shorthand? I.e., body { background: white rgb(0, 255, 127) }
I was able to use a clever hack, which was use a 1x1 white pixel, background.png, i.e., body { background: url("background.png") rgb(0, 255, 127) }
And I think I can put a raw data:image/png;base64, but when I uploaded the same 1x1 white pixel online, it generated like a 500 character code, which seems insane for a 1x1 white pixel.
Is there another method to achieve the same effect using just background? The effect being a white foreground and green background. Demo live at (zaydek.github.io). To see effect, drag up and down on the webpage.
I know I can do so with divs, etc., but I am curious about just CSS properties on one element, i.e., body or a combination of html and body. Thanks.
Found a viable anwser at http://proger.i-forge.net/Компьютер/[20121112]%20The%20smallest%20transparent%20pixel.html
The winner is 1-color GIF – 35 bytes. Data URI for white 1×1 image:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.
From what you say, you only want the background to be affected.
For backgrounds to be (partially) transarent, you have to use a
a) PNG background
or
b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
Like so: background:rgba(0,0,0,0.2);
This is not supported in IE8 and below.
The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.
There are a few things you can do.
You could target only the background and set it to an RGBA value:
background: rgba(255, 255, 255, 0.5);
This wont work in IE8 and before, so you can use a workaround using linear gradient filters:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );
You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!
You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.
You could use a semi-transparent PNG as the background image and set it to repeat.
Why not simply make a half-transparent png and use that as background image instead of setting the input opacity? Or if you don't have to support IE8- you can also use rgba().
I'm building a new website, and I'm looking for a transparent navigation bar so the background is visible.
There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org
You will probably want to set the color of the element and then apply the opacity to it.
.transparent-style{
background-color: #ffffff;
opacity: .4;
}
You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/
Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.
You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.
.transparent-style{
background-color: rgba(255, 255, 255, .4);
}
Using RGBA over opacity means that your child elements are not transparent.
When you have a 6 digit color code e.g. #ffffff, replace it with #ffffff00. Just add 2 zeros at the end to make the color transparent.
Here is an article describing the new standard in more depth: https://css-tricks.com/8-digit-hex-codes/
All you need is this:
#ffffff00
Here the ffffff is the color and 00 is the transparency
Also, if you want 50% transparent color, then sure you can do...
#ffffff80
Where 80 is the hexadecimal equivalent of 50%.
Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which when converted to hex becomes 80
And since in transparent we want 0 opacity, we write 00
#0000ffff - that is the code that you need for transparent. I just did it and it worked.
You can specify value to background-color using rgba(), as:
.style{
background-color: rgba(100, 100, 100, 0.5);
}
0.5 is the transparency value
0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave me true transparency.
According to MDN there is a transparent keyword, which is short for rgba(0,0,0,0).
{background-color: transparent;}
If you are looking for android apps, you can use
#00000000
Yeah I think the best way to transparent the background colour (make opacity only for the background) is using
.style{
background-color: rgba(100, 100, 100, 0.5);
}
Above statement 0.5 is the opacity value.
It only apply the opacity changes to the background colour (not all elements')
The "opacity" attribute in the CSS will transparent all the elements in the block.
Here, instead of making navigation bar transparent, remove any color attributes from the navigation bar to make the background visible.
Strangely, I came across this thinking that I needed a transparent color, but all I needed is to remove the color attributes.
.some-class{
background-color: #fafafa;
}
to
.some-class{
}
input[type="text"], input[type="password"]{
opacity:0.5;
}
This fades both - input body and border. I don't want border transparent, just body, so the underlying image is visible. User-text inside the input should not be transparent, of course.
input [type="submit"]{
margin-left:50px; // here nothing works at all.
}
The opacity property influences the opacity of the whole element. Your question is bit vague, but I assume that you want to have a semi-transparent background, while the content and borders shouldn't have transparency.
To do so, you need to set a semi-transparent background to the element. This is called alpha-transparency, as a fourth color channel - the alpha channel - is used to store the transparency information (usually in an image like a PNG).
In modern browsers you could use the rgba() value for the background property:
/* semi-transparent white background */
background: rgba( 255, 255, 255, .5 );
In MS IE you could use a gradient filter, which supports ARGB colors since MS IE 5. Just fade from a color to itself: (be aware, that the alpha channel comes first and all four color values are noted as two-digit hexadecimals)
/* the same for IE 7+8, should get included in a separate MS IE specific stylesheet */
background: none;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
Opacity works on the whole text input including the text inside it. So your code won't work.
Option 1) Can you use CSS3? If so, use (with the color you want, of course):
background-color: rgba(255,0,0,0.5);
Option 2) You can set the background of the Input as the image you want to see.
Option 3) You can set the background as a semi-transparent solid color image (.gif/.png, which can be 1x1 in size and repeated in X and Y).
For the submit, you need to get rid of the space in your selector:
input[type="submit"]{
margin-left:50px;
}
And you can't specify what parts of the element you want to make transparent with opacity. It applies to err'thang. There might be 'hacks' of sorts to achieve what you want, such as using a wrapping div to create the border.