Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Transparent background and text over an image

    Can anyone help me by showing me how to achieve this style seen in the following URL,

    http://www.bbc.co.uk/food/chicken

    I would like to create the style seen in the provided example of an image with a transparent black box along the bottom with text which can be made into a link.(Avoiding using Photoshop)

    Thank you.

  • #2
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    In javascript there is a rgba function to set colours
    the a value is transparency so set that to half of max

    dont know if theres the same sort of thing in CSS

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    the rgba function exists in css too. rgba(0, 0, 0, .5) will set the colour as black with 50% transparency. the final value set in increments of .1 determines the opacity.

  • #4
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you, how do I get it to overlay an image though?

  • #5
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    in javascript just set that rgba opacity in style before any draw to the canvas and then it does it automatically,
    in CSS I think you put opacity:0.5
    Last edited by donna1; 12-05-2012 at 01:53 PM.

  • #6
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Ive just tried it on the hydra example and opacity is not really what I need for games moving over a background
    I want surrounding white in the hydra image to be transparent.
    Heres the example with a background and opacity of object set to 0.5 you can see the problem - HELP

    http://donoi.hostoi.com/hydrabck.html


  •  

    Tags for this Thread

    Posting Permissions

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