what is opacity in css3? - Site Owners Forums

binarynpixel · 06-11-2013, 10:37 AM

Hi friends,
what is opacity in css3? let me help to know about it. please share your feedback.
Thanks.

jordan_rap13 · 09-26-2013, 12:16 PM

opacity:0 // you dont see anything
opacity:1 // you see the element
opacity:0.1 - 0.9 // check the results!

Gusani_Infotech · 09-27-2013, 02:13 AM

Hi,

Opacity is property in CSS3 that permit to change the transparency of the image so that text fade in and out the background.
Transparency amount- 0.0 -100% transparent
1.0- 100% opaque
0.1 to 0.9 variation in result

kashifalijugnoo · 10-23-2013, 05:12 AM

Opacity is CSS3 transparent property whose value changes 0 to 1 or 0 to 100(depends on the browser),it can be applied on both text and image.
0 value indicates less transparent or most fade effect.
1 value indicates more transparent or least fade effect.
vice versa for 0 to 100 for IE9 and earlier
Syntex:
property : value
opacity : 0.5;
filter:alpha(opacity=40) // FOR 1E9 AND EARLIER

lovewebdesign · 10-31-2013, 08:08 PM

The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent—anything below that element will show completely through. 1.0 is 100% opaque—nothing below the element will show through.

wctumesh · 11-06-2013, 03:22 AM

See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

NicholasCage · 12-16-2013, 10:34 AM

Opacity is property in CSS3 that permit to change the transparency of the image so that text fade in and out the background.

mypress2 · 01-28-2014, 07:04 AM

The CSS3 property for transparency is opacity. like that can change the transparency of a text or image

soufianYH · 01-31-2014, 10:03 AM

See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>

alligatortek001 · 02-26-2014, 03:39 AM

Quote:

Originally Posted by binarynpixel

Hi friends,
what is opacity in css3? let me help to know about it. please share your feedback.
Thanks.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

06-11-2013, 10:37 AM	#1
binarynpixel Registered User Join Date: Apr 2013 Location: Sydney Posts: 127	what is opacity in css3? Hi friends, what is opacity in css3? let me help to know about it. please share your feedback. Thanks. __________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. \| To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. \| To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

09-27-2013, 02:13 AM	#3
Gusani_Infotech Registered User Join Date: Sep 2013 Posts: 19	Hi, Opacity is property in CSS3 that permit to change the transparency of the image so that text fade in and out the background. Transparency amount- 0.0 -100% transparent 1.0- 100% opaque 0.1 to 0.9 variation in result __________________ We offer Professional and Affordable services like To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. and To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

10-31-2013, 08:08 PM	#5
lovewebdesign Registered User Join Date: Aug 2013 Posts: 48	The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent—anything below that element will show completely through. 1.0 is 100% opaque—nothing below the element will show through. __________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. \| To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. \| To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

11-06-2013, 03:22 AM	#6
wctumesh Registered User Join Date: Jul 2013 Posts: 29	See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values: <div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div> __________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. \| To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

01-31-2014, 10:03 AM	#9
soufianYH Registered User Join Date: Jan 2014 Posts: 46	See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values: <div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> __________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

09-26-2013, 12:16 PM	#2
jordan_rap13 Registered User Join Date: Sep 2013 Location: Kalamata, Greece Posts: 53	opacity:0 // you dont see anything opacity:1 // you see the element opacity:0.1 - 0.9 // check the results!

10-23-2013, 05:12 AM	#4
kashifalijugnoo Registered User Join Date: Oct 2013 Posts: 5	Opacity is CSS3 transparent property whose value changes 0 to 1 or 0 to 100(depends on the browser),it can be applied on both text and image. 0 value indicates less transparent or most fade effect. 1 value indicates more transparent or least fade effect. vice versa for 0 to 100 for IE9 and earlier Syntex: property : value opacity : 0.5; filter:alpha(opacity=40) // FOR 1E9 AND EARLIER

12-16-2013, 10:34 AM	#7
NicholasCage Registered User Join Date: Dec 2013 Posts: 44	Opacity is property in CSS3 that permit to change the transparency of the image so that text fade in and out the background.

01-28-2014, 07:04 AM	#8
mypress2 Registered User Join Date: Jan 2014 Posts: 17	The CSS3 property for transparency is opacity. like that can change the transparency of a text or image

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Opacity	davikerkrish	HTML / DHTML	2	02-26-2014 06:10 AM
HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial	JavaScriptBank	Javascript	2	10-31-2013 08:10 PM
HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial	JavaScriptBank	Javascript	0	05-27-2013 08:10 PM
HTML5 and CSS3 frameworks?	cianfie	Programming General	7	10-23-2012 07:47 AM