I have a form inside a div with a transparent color. I'd need to have the input texts plain white (non transparent). How can I do it?
Here's some code:
http://jsfiddle.net/d5Xuu/11/
(don't mind the background, it's just a random image I picked for the example)
Thanks
#carlo; may be you have to use use css3 rgba color for your background transparency which is not effect div child elements.
background: rgba(0,0,0,0.3)
for IE use filter
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
If you use:
opacity: .7
of a div, his sons take the same property.
You can solve using rgba (255,255,255, .7)
http://jsfiddle.net/d5Xuu/19/
Related
I'm trying to use the mask CSS property with #supports CSS at-rule and as a fallback option for older browsers I want the background image to render in it's original color.
So far I've been using this approach
background-color: pink;
background-image: url('../img/SVG/chevron-thin-right.svg');
#supports (-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg')) and
( -webkit-mask- size:cover) {
-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg');
-webkit-mask-size: cover;
}
The problem is that the mask property doesn't apply correctly to the background image even if opened in a supported browser. It doesn't render the correct pink color, instead it renders a purple color(it seems like the pink is mixed with the original image color).
If I remove the background-image: url('../img/SVG/chevron-thin-right.svg'); part from the code, then the desired pink color is rendered.
What would I need to change so the desired color renders correctly when the mask property is supported and the original background image is shown if it is not supported?
Is it possible to make a part of image gradient on an existing background?
The result as in the example picture you added can be achieved by using 2 containers, one with a background image, the other (which lies on top of the first) uses a CSS gradient background, where one of the gradient colors has an alpha of 0 (i.e. is transparent).
For more info on CSS gradients see: https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Images/Using_CSS_gradients
to make a gradient that is transparent on one side, use rgba color, for example:
#grad1 {
height: 200px; width:500px;
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
}
The a in rgba stands for alpha, it is the transparency an has a value between 1(opaque) and 0(transparent)
So, here is JSFIDDLE.
Here, you see header with background color gradient:
background: linear-gradient(to right, #827099 0%, #dc5562 100%)
I also have span with :before css attribute that mimics the background color behind it.
The purpose of this is to get a "cut" feature as a part of the word "THIS". You will notice that a top left portion of "T" is missing or more like hidden behind the :before attribute.
The issue I am having is that since the background color is linear-gradient, when the screen width changes, so does the linear-gradient (you can see by making the browser window smaller)
This change in the gradient does not reflect on the :before attribute and it no longer matches the background color.
Is there a way to fix this while keeping the linear-gradient of the background?
Not sure if this is an option for your use case, but you could set the linear gradient to ensure that the color change doesn't happen until after it clears the cutout.
You would set the first stop in the gradient to be the width of the padding (118px) plus the width of the clip border (21px) and then change the clip border colors to be the same as the starting color of the gradient. In the example below I rounded up to 140px.
https://jsfiddle.net/6dvy7dks/
.head {
background: linear-gradient(to right, #827099 140px, #dc5562 100%);
}
span.first:before {
border-top-color: #827099;
border-left-color: #827099;
}
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Wasn't sure, how to name this question, but, I've ran into a problem (minor, but still), I have a main div container, which is basically a white text box, that is 92% opaque:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
filter: alpha(opacity=92);
opacity:.92;
This works fine, however, on some pages I have a Jplayer audio player and that turns 92% transparent too. Does anyone know a way where I can still have the transparency, but keep objects inside the main div container fully opaque?
Use This CSS-
#div{
background: rgba(255, 255, 255, 0.92);
}
Then Use this script for browser compatibility in IE.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
</style>
<![endif]-->
Use background: rgba(255, 255, 255, 0.92);
When you use the background property it only applies the alpha (the last value, opacity) to the background itself. Use this instead of the ms-filter as it works across all **modern browsers.
#parent{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
}
#parent>*{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
This'll make the parent's alpha 92% and it's children 100%. But I can't remember if this sets the Opacity of the element or the alpha? Because if it sets the opacity of the element. Every element within the parent will also be affected. Another way would be to use an background image, selecting ie 8 and below to use an alternative method or some very awkward positioning.
I'm trying to have a container element faded using:
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=14)"; /*IE 8,9*/
filter: alpha(opacity=14); /*IE 5,6,7*/
opacity: .14; /* Good Browsers */
Within this container, I have children elements that are positioned relative with position absolute children in those. IE 8 and below have determined that these elements shouldn't listen to the transparency and should show at full opacity.
Is there any way to make IE respect the transparency of the positioned elements they should have? These elements fade in/out and have effects on them, so I'd like to avoid having numerous IE hacks everywhere in javascript, and if I duplicate the transparency in CSS on them other browsers will fade them again, making them almost invisible.
There are comments on JQuery's .fadeTo() method page that reference this bug. Unfortunately, there also doesn't seem to be any fix at the moment other than to apply the fading to each absolutely positioned element instead of the parent.
Try this technique, it's pretty cool. I've used this style:
.alpha80 {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.8);
background: transparent !ie;
zoom:1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff,endColorstr=#CCffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff, endColorstr=#CCffffff)";
}
And then for your HTML:
<div class="alpha80">
<!--your content-->
</div>