SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to fill in a white part of a given image ?

    Hello all,

    The library we are using is jquery.

    Here's the design:
    B2C26935-25A4-4C68-9E8C-D93A53CE5C7A.png

    Inside the middle image, the background should be white.
    But if it's white, I believe we can't achieve the mask effect.

    Here's the css part of it:

    http://jsfiddle.net/9EFdF/20/

    Can we "fill in" incrementally bottom-up, with a red color, like the picture above ?

    Does anyone have a clue about how to make this happen please ?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by oikram View Post
    Hello all,

    The library we are using is jquery.

    Here's the design:
    B2C26935-25A4-4C68-9E8C-D93A53CE5C7A.png

    Inside the middle image, the background should be white.
    But if it's white, I believe we can't achieve the mask effect.

    Here's the css part of it:

    http://jsfiddle.net/9EFdF/20/

    Can we "fill in" incrementally bottom-up, with a red color, like the picture above ?

    Does anyone have a clue about how to make this happen please ?
    Someone with an in-depth knowledge of CSS would I think be best at this stage. When then CSS technique is nailed down, JavaScript can then be used to make the few adjustments that are needed to automate things.

    I'll move this over to the CSS forum for now, to see if anyone there can help.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by oikram View Post
    Here's the design:
    B2C26935-25A4-4C68-9E8C-D93A53CE5C7A.png

    Inside the middle image, the background should be white.
    But if it's white, I believe we can't achieve the mask effect.
    You are correct.

    The image in your fiddle does not match your example png. No black wavy pattern.

    The image with the wavy line will need solid edges and a transparent center (the opposite of the fiddle image) so a red background-color can show through.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, the inside white (besides the small curvy border between black and red) has to be transparent, the rest is pasted as a rectangle covering the page-background and the horizontal line.
    If it is a dynamic level meter, then the img is in the foreground, and has a white background color.
    Now you can use a red background image and move that dynamically up and down with the background-position.
    So it is an image with a background image!

    (Something like this in "The port-hole theory: positioning of background-images in css")


Tags for this Thread

Bookmarks

Posting Permissions

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