<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Funcoder Technology Blog &#187; WebDev</title>
	<atom:link href="http://www.funcoder.com/tag/webdev/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.funcoder.com</link>
	<description>Life and times of a Geek Blogger, WinDev, .NET and Rails Developer</description>
	<lastBuildDate>Fri, 20 May 2011 08:11:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>WebDev &#8211; Creating Opaque backgrounds without affecting Text</title>
		<link>http://www.funcoder.com/2011/03/22/webdev-creating-opaque-backgrounds-without-affecting-text/</link>
		<comments>http://www.funcoder.com/2011/03/22/webdev-creating-opaque-backgrounds-without-affecting-text/#comments</comments>
		<pubDate>Tue, 22 Mar 2011 13:06:35 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[WebDev]]></category>

		<guid isPermaLink="false">http://www.funcoder.com/2011/03/22/webdev-creating-opaque-backgrounds-without-affecting-text/</guid>
		<description><![CDATA[In WebDev if you create a cell and set its background and opacity then the elements within the cell will also appear with the same opacity. This is not great when you want to show text with say a crisp white colour. So how do you produce the effect without affecting the text? Firstly you [...]]]></description>
			<content:encoded><![CDATA[<p>In WebDev if you create a cell and set its background and opacity then the elements within the cell will also appear with the same opacity.</p>
<p>This is not great when you want to show text with say a crisp white colour. So how do you produce the effect without affecting the text?</p>
<p>Firstly you need to add an image control, set its Type to Generated.</p>
<p><a href="http://www.funcoder.com/wp-content/uploads/2011/03/image.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 0px; border-width: 0px;" title="image" src="http://www.funcoder.com/wp-content/uploads/2011/03/image_thumb.png" border="0" alt="image" width="470" height="291" /></a></p>
<p>Also make sure that you select “The control can be overlaid” on the image and then add a cell over the text. I usually set a background colour to the image to help me work with it in design.</p>
<p>Add a text control to the cell and set some text. Note that the Cell control also needs to be set as “The control can be overlaid”.</p>
<p><a href="http://www.funcoder.com/wp-content/uploads/2011/03/image1.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;" title="image" src="http://www.funcoder.com/wp-content/uploads/2011/03/image_thumb1.png" border="0" alt="image" width="476" height="403" /></a></p>
<p>Even though you set the background of the image you still need to generate a new background with the opacity. Its easy and only requires a few lines of code.</p>
<p><a href="http://www.funcoder.com/wp-content/uploads/2011/03/image2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;" title="image" src="http://www.funcoder.com/wp-content/uploads/2011/03/image_thumb2.png" border="0" alt="image" width="311" height="108" /></a></p>
<p>Note that you have to make sure the shape of the background is set to Solid Background for this to work.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.funcoder.com/2011/03/22/webdev-creating-opaque-backgrounds-without-affecting-text/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

