opacity

CSS opacity only to background color, not the text on it? [duplicate]

由 末鹿安然 提交于 2019-11-26 13:52:47
This question already has an answer here: How do I give text or an image a transparent background using CSS? 28 answers Can I assign the opacity property to the background property of a div only and not to the text on it? I've tried: background: #CCC; opacity: 0.6; but this doesn't change the opacity. It sounds like you want to use a transparent background, in which case you could try using the rgba() function: rgba(R, G, B, A) R (red), G (green), and B (blue) can be either <integer> s or <percentage> s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or

jquery IE Fadein and Fadeout Opacity

由 你说的曾经没有我的故事 提交于 2019-11-26 13:17:30
I am getting this weird problem in IE with a CSS Overlay I am applying for a lightbox. Basically, I use fadein and fadeout for jquery - the problem is that everything works fine EXCEPT in IE . In IE - I get no fadein - rather it just goes straight to opacity background. On fadeout - it removes the "opacity" for < 1 sec second and renders the page a "solid color" before removing the overlay. Anyone know how to fix this bug ? Its really annoying - I am using all the correct filters etc its just the fadein and fadeout in IE ? I had the same problem in IE8. Setting the opacity of the DIV in

How to apply an opacity without affecting a child element with html/css?

由 旧时模样 提交于 2019-11-26 12:26:33
问题 I want to achieve this using html and css: I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn\'t work: both divs have 0.3 opacity. jsFiddle of my try here The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity). 回答1: As far as I know you can't do it in a simple way. There a couple of options here: Use absolute positioning to position box "inside" the container.

How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?

由 人盡茶涼 提交于 2019-11-26 12:17:53
问题 Using the HTML5 <canvas> element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it in. I have figured out how to load the image and draw it to the canvas, but I don\'t know how to change its opacity once it as been drawn. Here\'s the code I have so far: var canvas = document.getElementById(\'myCanvas\'); if (canvas.getContext) { var c = canvas.getContext(\'2d\'); c.globalAlpha = 0; var img = new Image(); img.onload =

R Scatter Plot: symbol color represents number of overlapping points

由 随声附和 提交于 2019-11-26 12:12:17
问题 Scatter plots can be hard to interpret when many points overlap, as such overlapping obscures the density of data in a particular region. One solution is to use semi-transparent colors for the plotted points, so that opaque region indicates that many observations are present in those coordinates. Below is an example of my black and white solution in R: MyGray <- rgb(t(col2rgb(\"black\")), alpha=50, maxColorValue=255) x1 <- rnorm(n=1E3, sd=2) x2 <- x1*1.2 + rnorm(n=1E3, sd=2) dev.new(width=3.5

How to darken a background using CSS?

由 别来无恙 提交于 2019-11-26 10:15:23
问题 I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the background-image darker, and not everything else? background-image:url(\'http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png\'); 回答1: Just add this code to your image css body{ background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ),

How to make blinking/flashing text with CSS 3?

由 元气小坏坏 提交于 2019-11-26 09:44:55
Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0 , then again fades out, appears again, and so on... I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0 . Is that possible? Mr. Alien You

Any trick to use opacity on a panel in Visual Studio Window Form?

由 若如初见. 提交于 2019-11-26 09:44:44
问题 I recently started exploring Visual Studio. I was trying to create a slide menu. More specifically, when the user would press the button a submenu would pop up to the right. To achieve that i have placed a Panel to resize itself. Apart from functionality i wanted to add a bit more design and make the Panel appear a bit faded. I know that Panels in Visual studio do not have opacity, but i was thinking if anyone knows a way-trick-idea about how it can be achieved. I tried a Picture Box but that

HTML/CSS text background transparent but text not

由 孤人 提交于 2019-11-26 09:25:04
问题 So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code: @charset \"utf-8\"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p {

How to make in CSS an overlay over an image?

由 偶尔善良 提交于 2019-11-26 09:17:03
问题 I am trying to achieve something like this: When I hover over an image, I would like to put on that image this dark color with some text and the icon. I am stuck here. I found some tutorials but they didn\'t work out for this case. Also, another issue -- every image has a different height. The width is always the same. How can this effect be achieved? 回答1: You can achieve this with this simple CSS/HTML: .image-container { position: relative; width: 200px; height: 300px; } .image-container
订阅 opacity