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 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question opacity on div causes text to be opaque?!

    Hi,

    On my site: http://www.jbiddulph.com/touchtile/

    there is a block of opacity over the main header image containing some text which is also the same color which I tried to overwite the opacity on the H2 and P tags but that didn't work, I also tried z-index: 100; that also didn't work

    Please help

    CSS
    Code:
    #viewrange {
    		position: absolute;
    		bottom:62px;
    		left:0px;
    		background-color: #ffffff;
    		padding:6px;
    		margin:0px;
    		width:412px;
    		height: 148px;
    	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    	filter: alpha(opacity=15);
    	-moz-opacity:0.15;
    	-khtml-opacity: 0.15;
    	opacity: 0.15;
    	}
    	#viewrange h2 {
    		color: #ffffff;
    		z-index: 100;
    		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    	filter: alpha(opacity=100);
    	-moz-opacity:1;
    	-khtml-opacity: 1;
    	opacity: 1;
    	}
    	#viewrange p {
    		color: #ffffff;
    		z-index: 100;
    	}

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there jarv,

    would "rgba(255,255,255,0.15)" be an acceptable option for you?



    If not, then use this code...
    Code:
    
    #viewrange {
        position:absolute;
        bottom:62px;
        left:0;
        background-image:url(viewrange-bg.png);
        padding:6px;
        margin:0;
        width:412px;
        height:148px;
     }
    ...with the png image in the attachment.

    coothead
    Attached Files Attached Files
    Last edited by coothead; 01-06-2013 at 01:40 PM. Reason: added an alternative

  • Users who have thanked coothead for this post:

    jarv (01-06-2013)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hey jarv,
    See if this example helps - http://nopeople.com/CSS%20tips/opacity/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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