Making blocks transparent
Permalink
Hi all,
Just wondering was there a way to make content/image blocks transparent. I would like to have some sort of colour in the block but have it faint so that the background image can come through while not affecting the ability to read/view what is in the block.
Hope the above makes sense.
Barry
Just wondering was there a way to make content/image blocks transparent. I would like to have some sort of colour in the block but have it faint so that the background image can come through while not affecting the ability to read/view what is in the block.
Hope the above makes sense.
Barry
Hi JohntheFish
Your w3schools link worked a treat.
Cheers
Your w3schools link worked a treat.
Cheers
Hi JohntheFish
The code I found works on Internet Explorer but when I use Chrome it doesn't. How can I overcome the transparency issue across several operating sysems?
Thanks
Barry
The code I found works on Internet Explorer but when I use Chrome it doesn't. How can I overcome the transparency issue across several operating sysems?
opacity:0.6; filter:alpha(opacity=60)
Thanks
Barry
Use my code below!
As 55 says.
The 'filter:' part is IE specific. Its the 'opacity:' part that other browsers process and they need to have something to set the opacity of. In the example link, it was setting the opacity of an image (so it had something to work on).
By setting a compound background style called .opaque, that compound style includes a colour (black) and an opacity for that background (0.7) (or 0.6 in your case).
The 'filter:' part is IE specific. Its the 'opacity:' part that other browsers process and they need to have something to set the opacity of. In the example link, it was setting the opacity of an image (so it had something to work on).
By setting a compound background style called .opaque, that compound style includes a colour (black) and an opacity for that background (0.7) (or 0.6 in your case).
I use CSS, so in the theme CSS file I have a class called opaque:
This gives a black transparent background.
The first three '0' are rgb for black, the '0.7' is the alpha amount of transparency. '0' is completely see through, '1' is solid.
This is for white:
.opaque{background:rgba(0,0,0,0.7);}
This gives a black transparent background.
The first three '0' are rgb for black, the '0.7' is the alpha amount of transparency. '0' is completely see through, '1' is solid.
This is for white:
.opaque{background:rgba(255,255,255,0.7);}
Hi,
I found an easy way to add transparency to a block that has been assigned a color. My columns i have assigned the following color rgb(53, 51, 51).
To add transparency, in edit mode, click on the column tag, then click 'Edit Area Design'. The second icon 'Background color and image' , click on the color picker then copy and paste the color code below into a textbox bottom right hand of the box ->
rgba(53, 51, 51,0.7)
The 'a' allows opacity to be applied to the color where '0.7' is percentage allowed, in this case 70%
I have attached a screenshot to make it a bit easier.
Hope this helps
I found an easy way to add transparency to a block that has been assigned a color. My columns i have assigned the following color rgb(53, 51, 51).
To add transparency, in edit mode, click on the column tag, then click 'Edit Area Design'. The second icon 'Background color and image' , click on the color picker then copy and paste the color code below into a textbox bottom right hand of the box ->
rgba(53, 51, 51,0.7)
The 'a' allows opacity to be applied to the color where '0.7' is percentage allowed, in this case 70%
I have attached a screenshot to make it a bit easier.
Hope this helps
The basic css is explained at
http://www.w3schools.com/css/css_image_transparency.asp...
If Googling for more about it, the keywords to search for are:
css transparency.
You may be able to do some of this by adding rules to a block design. However, it is more likely you will need to write some more specific style rules and add them to a new template for the blocks concerned or to your theme.
You could also use my style quickie addon (currently on offer)to add css to a page.
http://www.concrete5.org/marketplace/addons/style-quickie/...