I'm trying to learn HTML and CSS at the moment, and i am doing myself a site.
I used for the background picture
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
and i want to make a div opaque in order to add some photos on it.
For the rest of the divs in the site i used
background-color: black;
opacity: 0.8;
The problem is that when using opacity: 1; on the div which should contain the photos, the div dissapears (it appears for a split second behind the main background image).
I understand that opacity transfers from parent to child divs but i had just deleted all classes and made each div transparent by pasting those 2 lines of code and the div which i need with opacity: 1; still disappears under the background.
Any ideas? Thank you.
I would suggest using rgba colors to make things opaque, or you can use opaque pictures (pngs for example).
You would use rgba like this:
background: rgba(0,0,0,0.5);
the 0.5 says how much opaque it will be, the 0,0,0 is black - change that to any color you want.
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
I have a video background on my website, which want to have a blur overlay over it. Something like IOS7 Notification Center. Since I could not do it by Photoshop. I thought to use blur effect in CSS. It seems also doesn not do what I want.
However, I made a div class width 100% height and width. and choose white color as background, then gave it the blur element. It does not work the way I want, anyway.
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
}
HTML : <div id="blur"> </div>
This is an example like what I am looking for: http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg
Any idea?
A CSS blur filter will blur what's part of the layer, not what's behind or in front of the layer. So you may need to apply this type of filter directly to the video container.
I'm not 100% sure this is your issue since no HTML was added to the question.
UPDATE:
I just tested this on YouTube.com and if I apply a blur filter directly to the <video /> element, the video plays blurred.
Don't think i understand the question correctly. But if you want a white layer on top of the video you need to add the opacity property in your css code, to give the effect of a transparent overlay.
opacity: 0.4;
Your code should then look like
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
opacity: 0.4;
}
I've been trying to place an image over a div, my div is
.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7;
}
and then my image is
.asvp{
position:relative;
left: 300px;
top: 100px;
}
When I do this is puts the image under the div, what do i do in order to place it over the div? I know to put the image into the div but that will but the opacity onto the image which I dont want.
Try adding z-index:1 to .my_box and z-index: 10 to .asvp. Hard to peg without the HTML code though. If this doesn't work, please create a jsFiddle and I'll sort you out. :)
You should also use margins instead of left and top. For example, on .asvp remove left and top and put margin: 100px 0 0 300px;. As a general rule of thumb, I only use left, right, top, bottom on absolute elements.
why dont you give your image position:absolute; instead... that would automatically put it ontop of it
Instead of repositioning, you can keep the image inside the div without its opacity effecting its contents. If it's a solid semi-transparent background like in your example, you could use rgba value on the div like this:
background-color: rgba(255,255,255,0.7);
This and other options here:
https://stackoverflow.com/a/6780462/2909501
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
When I blur a image it overflows the parent container, even specifying overflow to be hidden.
Is there a way to keep the blurred edges inside dimensions?
The image needs to be as css background and not inside tag
Example not working:
.box{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
.blur{
width: 100%;
height: 100%;
overflow: hidden;
-webkit-filter: blur(20px);
background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}
http://jsfiddle.net/tMjsJ/1/
It can be achieved by applying a margin to the child element and overflow:hidden to the parent.
.box {
overflow: hidden;
margin:5px;
}
.blur {
-webkit-filter: blur(20px);
margin: -5px 0 0 -5px;
background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
height:300px;
width:300px;
}
See an example here: http://jsfiddle.net/n1ck/tMjsJ/5/
As Joshua pointed out, it is the same technique as used here: Defined Edges With CSS3 Filter Blur
So, apparently, this doesn't seem to work on background images. Quite interesting find :) A similar but not exact post was demonstrated here:
Defined Edges With CSS3 Filter Blur
I would imagine that if you want to accomplish the same effect, try changing from using a div with a background image to an image itself, using width / height of 100%.
Edit: Check out #N1ck's answer. Applying a negative margin (even -1px) works seems to trigger the proper effect. Nice.
Also - to avoid the bleeding background color (white), or at least manage it better, try setting a background color in addition to the image.