I have a container with a gradient mask adding transparency to the top of the view as follows :
.container{
position: fixed;
top: 0;
height: 100vh;
overflow: scroll;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
Is there any way in css to apply this 3d transform only to the top part of the container? Maybe with a 3D matrix?
transform: perspective(1000px) rotateX(10deg);
The objectif being to give a little star wars opening credits style to the fade-out, but only to the topmost part of the view.
Thanks for the help :)
Was reading how to do it on https://css-tricks.com/tinted-images-multiple-backgrounds/
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
For me, though, it doesn't seem to work. Fiddle: https://jsfiddle.net/w6jnv67c/
Any idea what I'm doing wrong?
In this case, what you are doing wrong is not allowing for the size of the image.
The image is placed at the top left of the div which, in this case, means that there is nothing to see in that area of the image.
Just make the div a little larger and you will see.
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
/* bottom, image */
url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
width: 75px;
height: 75px;
}
<div class="tinted-image">
</div>
So if you want the image to fit in the div you have to use background-size.
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
/* bottom, image */
url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
width: 50px;
height: 50px;
background-size: cover;
}
<div class="tinted-image">
</div>
I have a div with a background-image. I want to overlay the background-image with an rgba color (rgba(0,0,0,0.1)) when the user hovers the div.
I was wondering if there's a one-div solution (i.e. not with multiple divs, one for the image and one for the color, etc.).
I tried multiple things:
<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>
And this CSS:
.the-div {
background-image: url('the-image');
margin: 10px;
width: 200px;
height: 80px;
}
#test-1:hover {
background-color: rgba(0,0,0,0.1);
}
#test-2:hover {
background: url('the-image'), rgba(0,0,0,0.1);
}
#test-3:hover {
background: rgba(0,0,0,0.1);
}
See this fiddle.
The only option I saw is to make another image, with overlay, preload it using JavaScript and then use .the-div:hover { background: url('the-new-image'); }. However, I'd like a CSS-only solution (neater; less HTTP requests; less harddisk). Is there any?
The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:
<div class="the-div">Red text</div>
<style type="text/css">
.the-div
{
background-image: url("the-image.png");
color: #f00;
margin: 10px;
width: 200px;
height: 80px;
}
.the-div:hover
{
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
}
</style>
See fiddle. Too bad that gradient specifications are currently a mess. See compatibility table, the code above should work in any browser with a noteworthy market share - with the exception of MSIE 9.0 and older.
Edit (March 2017): The state of the web got far less messy by now. So the linear-gradient (supported by Firefox and Internet Explorer) and -webkit-linear-gradient (supported by Chrome, Opera and Safari) lines are sufficient, additional prefixed versions are no longer necessary.
Yes, there is a way to do this. You could use a pseudo-element after to position a block on top of your background image. Something like this:
http://jsfiddle.net/Pevara/N2U6B/
The css for the :after looks like this:
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
edit:
When you want to apply this to a non-empty element, and just get the overlay on the background, you can do so by applying a positive z-index to the element, and a negative one to the :after. Something like this:
#the-div {
...
z-index: 1;
}
#the-div:hover:after {
...
z-index: -1;
}
And the updated fiddle: http://jsfiddle.net/N2U6B/255/
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
height: 1280px;
width: 960px;
background-size: cover;
}
.tinted-image p {
color: #fff;
padding: 100px;
}
<div class="tinted-image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas qui veritatis sunt perferendis harum!</p>
</div>
source: https://css-tricks.com/tinted-images-multiple-backgrounds/
Ideally the background property would allow us to layer various backgrounds similar to the background image layering detailed at http://www.css3.info/preview/multiple-backgrounds/. Unfortunately, at least in Chrome (40.0.2214.115), adding an rgba background alongside a url() image background seems to break the property.
The solution I've found is to render the rgba layer as a 1px*1px Base64 encoded image and inline it.
.the-div:hover {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}
for base64 encoded 1*1 pixel images I used http://px64.net/
Here is your jsfiddle with these changes made. http://jsfiddle.net/325Ft/49/ (I also swapped the image to one that still exists on the internet)
I've gotten the following to work:
html {
background:
linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
url('bgimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The above will produce a nice opaque blue overlay.
I'm trying to create a bootstrap navbar that has the top half in a certain color with 0.9 opacity and a background-image behind it, and the bottom half with complete transparency (opacity 0) just showing the body's color/background-image.
I've been playing for hours now with linear gradients trying to achieve the effect, but the closest I've got is...
html, body {
height: 100%;
background-image: url("/someBackgroundTexture.png");
}
.theNavBar {
background-image:
linear-gradient(
to bottom,
rgba(127, 180, 220, 0.9) 0%, /*opacity 0.9*/
rgba(127, 180, 220, 0.9) 50%, /*opacity 0.9*/
rgba(0, 0, 0, 0) 50%, /*transparent*/
rgba(0, 0, 0, 0) 100% /*transparent*/
)
,url("/someNavbarTexture.png");
height: 100%;
width: 100%;
}
It works well in terms of dividing the navbar into 2 pieces with different colors, but the problem is that "someNavbarTexture.png" is applied in the wrong half (the bottom half of the navbar), and is effectively just doing the same job that the background-image of html,body is.
What I want to do is somehow assign the ",url("/someNavbarTexture.png");" to the first 2 rows of the linear-gradient (which seems impossible).
Is there any easier way to achieve this effect with CSS? (I really don't care if I end up using linear-gradients or not!) Thanks for any thoughts at all.
--------EDIT---------
Here's a link explaining what I'm talking about...
http://codepen.io/d3wannabe/pen/gPPmOv
The only way I can see of doing this is with a pseudo-element (or div if you wish) that is absolutely positioned and is 50% of the container height.
/* Pen-specific styles */
html,
body {
height: 100%;
margin: 0;
}
/* Pattern styles */
.container {
background-image: linear-gradient(to bottom, rgba(127, 180, 220, 0.9) 0%, rgba(127, 180, 220, 0.9) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
height: 100%;
width: 100%;
position: relative;
}
.container:before {
content: '';
position: absolute;
width: 100%;
height: 50%;
background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
z-index: -1;
}
<section class="container">
</div>
I have already got these code:
http://jsfiddle.net/Dingzhou/brj8tnbg/
#-webkit-keyframes inout_webkit {
0% {
background:-webkit-linear-gradient(left, #000, #000 0, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0));
background-size: auto 8px;
background-repeat: repeat-x;
background-position: 0 50%;
}
3.3% {........
But the result is not 100% good because what I want is only 1 line but not multiple lines appear together...
Can someone help me to check if the code is wrong?
Instead of background-size: auto 8px use background-size: 100% 8px.