Problem:
I have a png image as a jquery dialog title. The image corners are transparent (rounded corners)
When I display the dialog over a 50% opaque overlay I see that the corners are not transparent.
Solution:
The problem was the positioning of the image as a title. The non-transparent corners were not of the image but of the div containing it. It wasn't transparent even tough I set the background-color to transparent in ".ui-dialog .ui-dialog-titlebar"
The solution I found is to set the ".ui-dialog .ui-dialog-titlebar" margin-top property to "-18px" so the png image is positioned outside, hiding the corners of the div
thanks for the help
Related
I've been struggling to understand the CSS interaction in a project I've been working on. Here's a codepen recreating it and the css I've used.
Codepen
.container
/*background is set to emulate the real use case*/
background red
height 400px
width 600px
position relative
display flex
justify-content center
align-items center
opacity 0.9
.blurred
background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
height 100%
width 100%
position absolute
filter blur(7px)
z-index -1
.text
font-size 35px
text-transform uppercase
color brown
/*this div is for comparison.
at 0.9 opacity the white background under it is
not visible yet the image under .container is clearly
visible at 0.9 opacity */
.comparison
height 400px
width 600px
background red
opacity 0.9
The idea here is that I wish to have an image with blur applied to it but also have text over it that's not blurred. The .container doesn't technically need a background color set but for the sake of recreating the issue exactly the way I encountered it I've set it's background color to red.
So according to my understanding lowering the opacity on .container makes .container and all its children more transparent. That is to say the lower it goes the easier it is to see the white background beneath all the elements. What I don't understand is why does the opacity also make .container fully transparent. I can clearly see the background image trough it. What I expected was for container to be filled with red and just barely showing the image inside. Instead .container has no filling color and I can clearly see the image.
I've made another div as a comparison. It's just a div with 0.9 opacity and nothing else. It doesn't lose it's background color like .container does.
I hope I've explained my question thoroughly enough. I've been trying to wrap my head around this for days now!
Background color goes behind the contents not on top, which is why it's called "back" ground. So your red background is behind your .blurred and .text.
When you set a background image of .banner class, that element is on top of background color. The reason your comparison div does not lose as much color is because there is nothing in front of background color. If you set the opacity of .blurred to reduce it's opacity and offset the competition you will get desired effect.
If you want the red background color to "lay on top" of the blurred background image, you can try adding it as a gradient "image" like this:
background-image linear-gradient(rgba(255,0,0,.9), rgba(255,0,0,.9)), url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
When you hover over an input type='image' the border appears, and then disappears on leaving the image. But not just the visibility, its spacing is lost too. I want my image to remain in a static position but still benefit from the border appearing. Hence I only want it to change colour. Is it possible to make the border appear before hovering? It's the image bobbing about I'm trying to avoid.
Set a border width on the image, but no colour, and then set colour on hover. This will ensure there is always a fixed width border around the image, and therefore won't shift the image position on hover.
input[type="image"]
{
border:solid 3px transparent;
}
input[type="image"]:hover
{
border-color:#ff0;
}
Live Demo: http://jsfiddle.net/rAPds/
I have a page having the background image using:
background:url('gir.gif') scroll no-repeat 0 0 #foo;
I want to provide color on the top of the image, such that the image is looking like behind the color.
#bashu; it's a better to use rgba color transparency because it's not transparent you content at all.
background: rgba(0,0,0,0.3)
for IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
you can create your rgba filter for IE for here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
check this for more Opacity of div's background without affecting contained element in IE 8?
The div with the background image should be separated from the div that holds your content and the background color.
The div with the content and background color should span the entire other div and have an opacity, or you can create a 1x1 transparant gif/png of the color instead.
Here is a jsfiddle example:
http://jsfiddle.net/AZk6c/
I would recommend using a transparant image as color instead so the text doesn't become transparant with the rest of the div. (unless there is no text in that div of course)
I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}