Transparency - Opacity - Post ID 193937

Jun 19th, 2012 at 09:28 AM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

With a <p class="blah"> This is some blah blah!</p>
in in a style sheet:
.blah {
width: 500px;
colour: hash000000;
background-color: hashffffff; (I cannot find the hash key on my Mac keyboard)
opacity: .6;
I get the level of transparency I would like for the background, but the text is also affected. What I want is crisp full-colour text on a semi-transparent background.....Any ideas Guys?

tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Jun 19th, 2012 at 12:38 PM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

What you need to do, is simply create the background via a <div> tag. Then you create class .blah2 and use this to style the p tag.
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Jun 20th, 2012 at 11:32 AM
User 122279 Photo

Inger
Senior Advisor
14,624 posts
Online Now

Hi Tony
We probably do things in different ways. I usually create the semi-transparent background as an image. Then I add it as a div background. An example can be seen here: http://www.fokaibalik.com, look at the text paragraph just above the footer.

The html for that one is:
<div class="tagline">&quot;Are you looking for really outstanding food & wines with a wide range of fish and meat? We recommend our excellent cuisine in relaxing surroundings.&quot;<br><br>&quot;Ger&ccedil;ekten s&#305;ra di&#351;i lezzetleri e&#351;siz bir atmosferde &#351;arap ve rak&#305; e&#351;li&#287;inde tatmak isterseniz, sizlere s&#305;ra di&#351;i et ve bal&#305;k mutfa&#287;&#305;m&#305;z&#305; huzurlu bir ortamda sunmaktan mutluluk duyar&#305;z...&quot;
</div>

and the css:
.tagline {
vertical-align:bottom;
background-image:url('images/textbg.png');
padding-top: 10px;
width: 950px;
margin: auto;
height: 97px;
color: #F8E4C4;
}


You probably don't need all the properties I have set, but well, here you are...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jun 20th, 2012 at 03:00 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

That's a good example there Inger, I must comment on those changing images though, I think your client needs to rethink their full background images. They are pretty blurry as they aren't meant to be that large I don't think.
Jo

http://elementsinwebdesign.com
Jun 20th, 2012 at 05:03 PM
User 122279 Photo

Inger
Senior Advisor
14,624 posts
Online Now

I have told them. Waiting for better pics...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jun 20th, 2012 at 05:31 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Ahh that's good to hear, with really nice pics on there that will be a pretty cool looking site :)
Jo

http://elementsinwebdesign.com
Jun 21st, 2012 at 09:38 AM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

I follow you Inger, although images take longer to load and I might give the div idea a go (suggested by SIR AGE}, for now.
By the way,has anyone tried the new "box" model yet? I understand article, sidebar section, but I haven't a clue about BOX.
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Jun 21st, 2012 at 03:15 PM
User 122279 Photo

Inger
Senior Advisor
14,624 posts
Online Now

Tony, the text background is not a large piture that takes time to load. Check the file I've attached, it's the image I have used on said website.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.