Results 1 to 11 of 11
  1. #1
    Senior Member
    Join Date
    Apr 2013
    Location
    Sydney
    Posts
    108

    what is opacity in css3?

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

  2. #2
    Registered User
    Join Date
    Mar 2012
    Location
    United States
    Posts
    14
    Go through this link it may help you out: http://www.w3schools.com/cssref/css3_pr_opacity.asp

  3. #3
    Registered User
    Join Date
    Jun 2013
    Posts
    4
    Opacity means transparency to an element. Opacity will help to determine which level of transparency do you want to have?

    For instant:

    opacity: 1;

    means your element will not have any transparency...

    and Opacity : 0; will lead complete transparency. I.e. your element will not be visible.

    You have to be careful when using Opacity. Because when you use opacity in a box, the elements inside it will all be associated with the parent opacity.

    For eg:

    <div class="box">
    <p> some text here</p>
    </div>

    .box {
    background: black;
    opacity: 0.5;
    }

    p {
    color: yellow;
    opacity: 1;
    }

    If you do this even though p has opacity 1, it will still be 0.5 transparent... so to avoid this rgba values should be used...

    .box {
    background : rgba(0, 0, 0, 0.5);
    }

    p {
    color: yellow;
    }

  4. #4
    <style>
    div
    {
    background-color:red;
    opacity:0.9;
    filter:Alpha(opacity=50); /* IE8 and earlier */
    }
    </style>
    <div>This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!</div>

  5. #5
    Member
    Join Date
    Feb 2013
    Location
    Philippines
    Posts
    70

  6. #6
    Registered User
    Join Date
    Jun 2012
    Location
    Fremont, CA
    Posts
    40
    One of the things that you can easily do in print design but not on the Web is overlay text on an image or colored background, and change the transparency of that image so that the text fades into the background. But there is a property in CSS3 that will allow you to change the opacity of your elements so that they fade in and out...
    We are Building a Mobile Phone Applications - Web Apps - Facebook Games

  7. #7
    Registered User webcreations's Avatar
    Join Date
    May 2012
    Location
    India
    Posts
    587
    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.

  8. #8
    Registered User
    Join Date
    Dec 2014
    Posts
    1

    CSS Opacity

    Hope the following link will help you...CSS Opacity

    Naimer

  9. #9
    Registered User
    Join Date
    Mar 2019
    Location
    Ahmedabad
    Posts
    178
    opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

  10. #10
    Senior Member
    Join Date
    Aug 2020
    Posts
    813
    The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

  11. #11
    Registered User
    Join Date
    Feb 2021
    Location
    Paris
    Posts
    45
    The opacity property controls how opaque an element is on a scale of 0.0 to 1.0. The lower the value, the more transparent the element is.
    You can choose up to what extent you want to make the element transparent. You have to add the following CSS property to achieve the transparency levels :
    - Fully Opaque
    - Semitransparent
    - Fully transparent

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

  Find Web Hosting      
  Shared Web Hosting UNIX & Linux Web Hosting Windows Web Hosting Adult Web Hosting
  ASP ASP.NET Web Hosting Reseller Web Hosting VPS Web Hosting Managed Web Hosting
  Cloud Web Hosting Dedicated Server E-commerce Web Hosting Cheap Web Hosting


Premium Partners:


Visit forums.thewebhostbiz.com: to discuss the web hosting business, buy and sell websites and domain names, and discuss current web hosting tools and software.