opacity

问题 I'm trying to implement a jQuery slider control for opacity of a certain element on my web page. Kind of like this question but with a slider. I was wondering how I should implement this best, as I'm a little lost as how I should get started... I'm guessing a function wouldn't be the best, would it? Defining a function and then calling it for the slider? The jQuery documentation for the slider control is proving to be a little too complex for me for this topic, but I'm sure some of you can

问题 I've tried to research this on Google but there doesn't appear to me to be any coherent simple answers. Is this because it's not simple, or because I'm not using the correct keywords? Nevertheless, this is the progress I've made so far. Created 8 vertices to form 2 squares. Created a texture with a 200 bit alpha value (so, about 80% transparent). Assigned the same texture to each square, which shows correctly. Noticed that when I use a texture with 255 alpha, it appears brighter. The init is

问题 Okay, so I've been searching for a simple way to fade in a div when a user scrolls it into view, but I can't find a straight solution. HTML <div class="container"> <div class="topdiv">This is a 100% height div. User scrolls down from here.</div> <div class="fadethisdiv">This content should be faded in once .fadethisdiv is [so many]px into the bottom of the viewport. Let's use 150px as an example.</div> </div> CSS .container { width:100%; height:600px; } .topdiv { height:100%; background-color

问题 I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field? 回答1: For that you could use background-color: rgba(0, 0, 0, 0.5) . The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level

问题 I am trying to make text inside a transparent div have no opacity, aka be completely black: <div style="opacity:0.6;background:#3cc;"> <p style="background:#000;opacity:1">This text should be all black</p> </div> Is this possible to do with only CSS? Thanks in advance 回答1: The easiest way is to style the background of the parent div with opacity/alpha: div { background: #fff; /* for browsers that don't understand the following rgba rule */ background-color: rgba(255,255,255,0.5); /* rgb,

问题 I am trying to create an "AJAX-spinner" using CSS animations. I have two layers with 70% opacity that sometimes overlap. The layers have the same color. When the layers overlap completely I want to replace them with a single layer. I figured that the two layers overlapping would result in a fully opaque layer, 70 + 70 is 140 after all. But that is not how opacity works apparently. The two layers overlapping is still transparent, what I can't figure out is how transparent. The only thing I can

问题 I want to produce an opaque solid color with 2 opacity values of that color. eg: 0.5 opacity black color rectangle when placed above same 0.5 opacity black color doesn't give me same result as an opaque (opacity 1) black color. I have tried this with different range of opacity values and found something like 0.5 & 0.8 produce 0.9 opacity black color, 0.4 & 0.82 and so on. These are not accurate values. What is the exact formula for calculating exactly opposite opacity values? 回答1: If two

问题 I have a hover effect set up with Jquery that changes the opacity of the hovered element. It works fine in all recent browsers, except for Chrome, where it shifts the body elements' background. Here's the link: http://wrong.ro/tataia/ My work environment is as follows: Google Chrome v18.0.1025.162 / Windows 7 x64. Is there any workaround for this? Thanks in advance! 回答1: I experienced something very close to this, in my case changing the opacity on hover caused a foreground image element to

问题 I have created fiddle for reference :- FIDDLE. In this i have table structure and i want stick the table header on top of page, so for that i have used translateY() you can check it on FIDDLE . Now on first column there is checkbox with opacity: 0.3 . Now when i scroll the table and any check box of tbody is overlapped with checkbox of thead then i am not able to check the thead checkbox. I have also created video of problem :- VIDEO. if there's opacity less then one and then if you try and

问题 I'm trying to set up an image within a div that will slowly appear (opacity from 0 to 1) over 5 seconds. I have this code: .fadeDivIn { opacity: 1; transition: opacity 5s ease-in; -moz-transition: opacity 5s ease-in; -webkit-transition: opacity 5s ease-in; -o-transition: opacity 5s ease-in; } but I can't figure out how to trigger it automatically. I've been doing transitions to other elements with CSS3 keyframes and would ideally like to apply something similar to opacity but have hit a brick