Hi Penny,
This is an interesting problem and one that I think most of us have faced in the past. You can do this so easily in print but using CSS things get a little trickier.
Here’s a sample page that hopefully shows you the problem and a couple of possible solutions;
http://d.pr/nSU4
In the top left hand corner you’ll see a black box that I’ve applied a CSS style of opacity:50% to. As you’d expect it makes the whole box semi-transparent so we can see the background through it. However, due to the cascading nature of CSS the image of the lighthouse that is a child of the black box also inherits this opacity setting. You’d, logically, think that a style of opacity:1 applied to the image would fix this but sadly not. There is no way to set the opacity of a child element that is contained within a semi-transparent item to be less transparent than its parent.
The good news is that there are several ways around this.
The first option is shown in the top right hand corner and uses a background colour defined in rgba (red, green, blue, alpha) with alpha defining the opacity of the colour. Simply create a CSS style and use the Extended button in the Edit > Styles dialog to redefine your background colour as;
name: background-color
value: rgba(0,0,0,0.5) !important
(the !important bit is there to tell the browser to use this style over any other is will find in the page)
The second option (and possibly the easiest) is to use Freeway’s own Graphic Effects on the panel background. Set the background colour to black (in this example) and the opacity to 50% and Freeway will create and insert a semi-transparent PNG into the background of the element. This creates a little more code on the page but using this method means you don’t need to know anything about CSS styling for it to work.
Either of these solutions should work if your panel background is a flat colour. If you are using an image then I’d suggest creating a semi transparent PNG of your image and insert it into the panel background using the Inspector palette as normal.
Regards,
Tim.
On 13 Sep 2013, at 06:59, Penny wrote:
I am trying to insert a graphic item into an HTML box, but give it different properties than the HTML box it’s set into. For example, I assign the HTML box to have 50% opacity, but in so doing, it assigns 50% opacity to the graphic items contained within it (even when I bring them to the front). I want them to have 100% opacity but can’t figure out what to do. These graphic items need to be contained within the HTML box in order to maintain their alignment, so I can’t pull them out.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options