I am using an image in background of my web page. Now when i uses a table in frontend, i want it to have some transparency effect. ?
How can i do that.
.semiTransparent
{
filter: alpha(opacity = 50);
opacity: .5;
}
this code is not working in CSS file
50% opacity IE:
filter: alpha(opacity = 50);
50% opacity other browsers:
opacity: .5;
The problem with transparency settings in CSS, is that content/text is also semi-transparent, which makes for difficult reading.
A good "cheat" is to use a semi-transparent PNG as a background image for the div/cell. See http://blog.twipler.com for an example and an image from http://blog.twipler.com/twipler/siteimages/white-alpha-thick.png
Related
Is there a way to fade in an image when a user scrolls the image into view using purely if not mostly CSS?
I have a bunch of images displayed and I'd like the images to appear as they scroll down as a nice effect.
If you want the image to fade in only when the user can see it (after scrolling the page), you can't do it with CSS only. To make the fade in/fade out effect on hover use opacity and transition. Example
img{
opacity: 0.6;
transition: all 1s;
}
img:hover{
opacity: 1.0;
}
If you want to use JQuery, it's possible. See this exmaple.
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
The CSS3 property for transparency is opacity.The opacity property can take a value from 0.0 - 1.0\
A lower value makes the element more transparent.
img:hover {
-webkit-filter: grayscale(100%);
}
Check this link, it would be of great help for you:-
http://designshack.net/?p=36895
i try to make a container for my site in google site that will be transparent so that the
background image will be visible.
i guess opacity property of css3 is not supported by google sites,
so is there any other way to do that? thanx
i tried
filter: alpha (opacity=50); -moz-opacity: 0.50; opacity: 0.50; -khtml-opacity: 0.5; but it's not recognized.
WARNING: Your HTML contains some tags that are not permitted. These have been removed from your changes.
If it allows you you can do that by applying a semi-transparent 1px x 1px .png image to the background of your container.
.yourContainer {
background:transparent url(myTransparentImage.png) repeat;
}
I stumbled onto this site: and started thinking. Is this possible using twitter's bootstrap? I don't see an opacity setting in the css file? Is it as easy as adding it.
In general, this is possible. Testflightapp uses the background-color: rgba attribute with an opacity level.
So if you want to set a background color with opacity to on of you element use this CSS:
elementname {
background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}
If you want to set the opacity on the element as a whole use:
elementname {
opacity: 0.5; /* opacity [0-1] */
-moz-opacity: 0.5; /* opacity [0-1] */
-webkit-opacity: 0.5; /* opacity [0-1] */
}
This is only supported by browsers that support CSS3.
A late answer, but I just found this question whilst looking up something very similar.
If you're using bootstrap with less, so that you're building the css yourself as part of an asset pipeline you should set opacity using the utility macro.
selector {
.opacity(50); /* opacity [0->100] */
}
It'll define the correct browser prefixes, including the IE filter syntax for you.
If you are using bootstrap with sass. You can use the opacity mixin.
#include opacity([from 0-100]);
This will take handle all browser compatibilities (if supported) dealing with opacity.
I'm trying to incorporate thickbox on my site. Basically, it's just a fancy javascript alert with a lot more functionality. However, when you the thickbox appears it darkens the rest of the screen. Id rather not have this. I have searched the CSS file extensively and cannot find how to change the opacity/background color. Any help would be appreciated.
link to CSS file:
http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
The "darkening of the screen" is caused by a black overlay with 75% opacity.
Change background-color to transparent if you do not want this.
It's this:
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
You can just empty the content or remove it altogether and problem is fixed!
#riku; you can use rgba for transparent color, like this
css:
.TB_overlayBG {
background: rgba(0,0,0,0.7)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
}
Because rgba is not transparent it's content as opacity does
For more check THIS
Can I control the visibility of some div in my website and make to become see-through using CSS only? In flash it's done through controlling what is called Alfa so I'm wondering if such a thing exist in CSS!
Edition 001
Can I control the opacity of the div's background only? So the text in the div wouldn't be effected?
You can use opacity in CSS
.transparent_class {
opacity: 0.5;
}
I think there are some problems with opacity in Internet Explorer so here is example how to change transparency in IE:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
HTH
http://www.quirksmode.org/css/opacity.html
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
Another way to make only the background transparent is by using a transparent png as background-image, and then use this jQuery fix for the special snowflake IE. This works in all browsers as far as I know.
Here is a good link talking about CSS navigation menue I hope it would be helpful:
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml