I'm trying to make a semi-transparent image scroll up to reveal another image below it.
So far, I've got the top image scroll up and the fixed image underneath, but I can't figure out how to get the transparent parts of the top image to show the fixed image underneath.
I've made sure that the top image is transparent and tested it by setting the top slides background color to red, which works fine, but setting it to transparent still shows as white.
In the CSS I've put both of these to no avail:
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
Could you tell me what I'm doing wrong or give me an alternate method to achieve this?
Thanks.
https://jsfiddle.net/3vw52ncb/2/
with help of jbutler483's fiddle, i have made what you want. You needed opacity to make image transparent and position: absolute; to remove white background.
Change your slide1'css with this code :
#slide_1 {
background-image: url("http://i.imgur.com/TIaK19Z.png");
background-size: 120%;
background-color: rgb(0, 0, 0, 0.2);
position: absolute;/* To remove white background */
top: 0;
opacity:0.8;/* To make the top image transparent */
left: 0;margin-bottom:100vh;
}
you can change the opacity value according to your need.
Tranparent fiddle and if you want then with white background fiddle
Related
I have a div, with a gray background. within the div i have some text.
I want to blur/smooth it's top and bottom background color, not the background it self just the top and bottom like smoothing it out as you can do in photoshop for example..(top and bottom because the div's width is 100% so only top and bottom).
for example (imagine it's width is 100%):
<div id='this' style='background-color:gray; height: 500px;'></div>
To "blur" a background with a solid color, use a linear gradient.
Example:
#this {
background-image: linear-gradient(rgba(0,0,0,0) 0%, gray 10%, gray 90%, rgba(0,0,0,0);
height: 500px;
}
See <gradient> (MDN)
See linear-gradient() (MDN)
I am trying to create a top to bottom fade effect from white to grey in a div box that has content in it. I am not sure what css will create this effect.
The result I want looks something like this image:
https://imgur.com/a/Ts9l0Do
This is just a cropped image of the website but as you can see it goes from a white color at the top to a darker greyish color to the bottom. This is what I want.
Try this css:
div {
height: 400px;
background: linear-gradient(to bottom, white 0%, grey 100%)
}
You can change the 'white' and 'grey' to hex codes or rgba for specific colours and change the height to whatever you need.
I want to have a div that has an image inside, but with the div and background being completely transparent, giving the impression the image exists alone, with the elements behind the background of the div appearing.
I've tried using rgba in several ways, such as background: rgba(204, 204, 204, 0.5); but all of these end up leaving a white background on the div when set to total transparency.
How can I implement this?
EDIT
Here is a picture:
How can I make the red button appear as normal, but be able to see what is behind the white part?
My HTML is as such:
<div id="transparent-background">
<img src="./images/ui/chat.gif" class="arrow-button"/>
</div>
Thanks,
Just use this CSS for your DIV:
#transparent-background {
background: transparent;
}
I have a web site with a fixed height black header like the one used here:
https://elementsproject.org/posts/
Notice how when a user scrolls the page the black text hits the black header. As the white background page with black text scrolls to the top I would like the black text color to fade away. In other words what I would like to do is to have a header bottom border with a white color where the opaqueness (is that a word) goes from 100% to zero.
Can someone tell me how I can make the opaque property change in this way from top to bottom of the header strip? Note that I'm looking for a modern browser solution only so that might make it a bit easier.
Thanks
you can use a box-shadow or a linear-gradient for this.
/* filled 50/50 */
background-image: linear-gradient(#yourBackgroundColorHere, transparent);
/* just the last 25% */
background-image: linear-gradient(#yourBackgroundColorHere 75%, transparent);
for more information check CSS-Tricks.com https://css-tricks.com/css3-gradients/
/* just a box-shadow under your header */
box-shadow: 0px 0px 20px 20px #yourBackgroundColorHere;
for more information about box-shadow check CSS-Tricks.com https://css-tricks.com/almanac/properties/b/box-shadow/
--
disclaimer: I'm not affiliated with css-tricks.com in any way, it is just a great website about everything css
try this code in style
100%
div { opacity: 0.0; }
50%
div { opacity: 0.5; }
0%
div { opacity: 1.0; }
for animation in jquery
$("#DivID").animate({opacity: 0}, 5000); //5 sec transaction
I'm trying to place one div with a partially transparent background (meaning regions of the image are blank -- not X% opacity) on top of another.
#about {
background-image:url('http://i.imgur.com/B922OoM.png');
background-position: center;
background-repeat: none;
background-size: cover;
background-color: transparent;
z-index: 2;
height: 450px;
width: 100%;
}
I can't get the div to not fill with white behind the image.
jsfiddle: http://jsfiddle.net/4HAxu/ -- the relevant div is #about
(I'm pretty sure the image is exported properly -- if you change background-color:transparent to background-color:blue, you'll see what I mean.)
Your image is fine.
It's the fact your #header doesn't actually extend down that far. If you change the background colour of your body you'll see it's not your #about div it's the body showing behind it that is white
Red BG body JSFiddle
To alleviate this problem, if you actually overlay your divs you will get the effect I think you're trying to achieve.
Overlayed divs with negative top margin