Opacity Applied to Heading
Your Page Title
If your page has a background image you can apply opacity to the title text. You don't need to alter the image.
Method 1: Inline Style (transparent background)
We did it with inline style here but you can put it in your style sheet if you want to reuse the code. Here's the code for inline style.
Copy and paste this in your Blog or Web page.
It will look like this.
Your Page Title
Method 2: Inline Style (Image background)
We did it with inline style here but you can put it in your style sheet if you want to reuse the code. Here's the code for inline style.
Copy and paste this in your Blog or Web page.
It will look like this.
Your Page Title
Method 3: Style Sheet
You can define the H1 or other heading tag in your style sheet. The code goes in your external style sheet or between the <HEAD> and </HEAD> tags in your template.
h1 {
color:white;
width:100%;
background:transparent;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
font-size:42px;
line-height:2em;
text-align:center;
}
The code to type in your Blog or Web page will look like this.
<h1>YOUR PAGE TITLE</h1>
We used an opacity filter of 50% and an arbitrary font-size. Notice that the width is defined. The browser wants to know the layout (height and width) when applying opacity. The color white works for nearly all backgrounds.
Tips
- Use Inline Style or define the H1 tag in the style sheet (you probably don't want to do both).
- Review the
HEADsection of your template. If the H1 tag is already defined use another heading tag for this example:h2, h3, h4, h5, or h6. Or, remove the H1 that is already defined. - Jagged Text when using Opacity?
We usedbackground:transparent;in the example. That will not work for everyone. Claude has a good example. On her background we have to explicitly say that the background is an image. Otherwise the text is jagged.
Jagged Text Solution
Change background:transparent; to the name of the background image.