Questions tagged [opacity]

Opacity is the degree to which a graphical object obscures objects which are rendered behind it.

Graphical objects which have a level of opacity less than 100% can be "seen through". The objects which are rendered behind are blended with the object in front; the resulting effect being like looking through a pane of coloured glass.

Opacity appears as an attribute in many graphical contexts, including [3D rendering], and Web Styling.

Opacity is the opposite of .

See also:

2509 questions
19
votes
4 answers

Javascript remove background color and opacity

How can I remove the background-color and opacity property using Javascript only (no Jquery!). I tried…
utdev
  • 3,942
  • 8
  • 40
  • 70
19
votes
2 answers

SVG animation opacity on loop

I would like to make an svg path's opacity to go from 0 to 100 back to 0 and to 100 on a continuous loop. So far i can get it to animate from 0 to 100 but not back again, Any ideas? Thanks
John Vaughan
  • 265
  • 1
  • 2
  • 13
18
votes
5 answers

Dynamic Opacity not changing when component rerenders in react native

I'm starting to learn React Native, and for my project I created a simple Button component to reuse in my project. I set the opacity value dynamically according to the variable 'disabled', however, the look of the button is not changing with the…
otavio1992
  • 712
  • 2
  • 6
  • 18
18
votes
8 answers

How to change the opacity of a card-block in bootstrap 4

Hey I just have a simple Card Bootstrap 4 component.
This is my header
This is my block
What I…
18
votes
1 answer

How to fade an image with CSS without opacity?

Thanks for all the help, solution below. I am new to web development, and I am trying to rebuild a website to practice my CSS. The website in questions is http://www.divecarib.com. If you scroll down to the pictures on that home page, you notice…
CZorio
  • 473
  • 1
  • 4
  • 15
18
votes
3 answers

Transparent Bootstrap Panel

I have picked this free bootstrap theme, and my problem is that I want to create transparent panels, but when I set opacity: 0.8; the text in the panel, of course, gets transparent, which is not something I would like to happen. I tried using this…
Boyan Hristov
  • 1,067
  • 3
  • 15
  • 41
18
votes
4 answers

How do you make an input field opacity not effect the text color inside it?

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.…
Jordan Simon
  • 289
  • 1
  • 4
  • 14
18
votes
4 answers

Element opacity but not border

Well, I have this question and I see that someone already asked something similar but this I don't understand yet. What I want to do is to set a opacity of 0.7 to an element but just to the content and not to the border, I want the border to stay…
Andrés Orozco
  • 2,490
  • 5
  • 32
  • 48
17
votes
5 answers

transparent background image

I have the following css. #mypass{ background-image: url("Images/logo.png"); background-attachment: fixed; background-position:140px 100px ; background-size: 100px; …
RAVITEJA SATYAVADA
  • 2,503
  • 23
  • 56
  • 88
17
votes
3 answers

No opacity on div inside a div with opacity

I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (that covers the whole screen) is having some opacity but when I try to have a…
Nick
  • 289
  • 2
  • 5
  • 8
17
votes
6 answers

Python PIL 0.5 opacity, transparency, alpha

Is there any way to make an image half transparent? the pseudo code is something like this: from PIL import Image image = Image.open('image.png') image = alpha(image, 0.5) I googled it for a couple of hours but I can't find anything useful.
Anderson
  • 3,139
  • 3
  • 33
  • 45
17
votes
4 answers

How can I change a background image opacity without changing on div content?

I want know that "How can I change background image opacity without changing on div content?" I searched too much & I don't find a good answer to solve this issue! HTML

title

hadivoice
  • 191
  • 1
  • 1
  • 8
16
votes
4 answers

Setting opacity of html elements in different browsers

I need to set an HTML object's opacity in JavaScript in all the browsers. In Firefox I do it with line: imageobject.style.MozOpacity=opacity/100; What is the proper javascript code to set the opacity of an element in different…
merveotesi
  • 2,145
  • 15
  • 53
  • 84
16
votes
2 answers

Flutter: Best way to change a widget opacity and color on scroll

My goal is to change the color and the opacity of the appbar when user scrolls down. My logic is: scroll offset = 0 : appbar is red with opacity = 1 0 < scroll offset < 40 : appbar is blue with opacity = 0.4 40 <= scroll offset : appbar is blue…
woshitom
  • 4,811
  • 8
  • 38
  • 62
16
votes
2 answers

Toggle Opacity with HotKey in Terminal/iTerm

Is there any way to set up a hotkey to change the opacity in either the terminal or iTerm? I usually use a low percentage opacity and it would be nice to be able to toggle on and off quickly. EDIT: Cmd + U does essentially the same thing without…