CODEWITHSUNDEEP
htmlcss
haybeye
haybeye

Reputation: 131

Background color for a text

i'm trying to give background to a text in html but i'm stuck.

i've tried the code below:

<p><span style="background-color: #000;color:#fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</span></p>

result is:

first result

that is what i want to do (like selected-text):

want to do

don't know how to do that. any helps would be great.

thanks!

Upvotes: 2

Views: 135

Answers (4)

Aaron
Aaron

Reputation: 10430

I guess this is what you're trying to do.

You need to make the paragraph inline(which will keep the black only behind your text and not overflow), then apply a small amount of padding and line-height to your paragraph so the lines touch and look nice.

p {
  display: inline;
  background-color: rgba(0,0,0,.7);
  color: #fff;
  line-height: 1.4;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</p>

Upvotes: 4

lukehillonline
lukehillonline

Reputation: 2647

If you want the transparency use background: rgba(0, 0, 0, 0.5) where the last value is the amount of transparency.

This is not supported by IE8 unfortunately http://caniuse.com/#search=rgba. You can use filter for IE 8 http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/

Also to get the full block of colour put your style onto the p tag and not the span.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</p>

p {
  background-color: rgba(0, 0, 0, 0.5);
  color:#fff;
  display: inline;
}

With a transparent background you can get issues with the colour overlaying and being darker between lines, you can play around with line-height: to fix this.

Upvotes: 0

prajakta
prajakta

Reputation: 162

try this jsfiddle : https://jsfiddle.net/xm4sLch8/1/ or apply below css to your span:

span{
    background: rgba(0,0,0,0.7);
    color: #fff;
    line-height: 32px;
    padding: 7px;
}

We can provide line-height, background instead of background-color to apply background transparency with same effect

Upvotes: 0

Rahul Prajapati
Rahul Prajapati

Reputation: 202

let me explain you what you need to do... the style which you gave to span tag remove it and give it to " P " tag, this will solve your problem.

So what you will get it like this :

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p style="background-color:rgba(0, 0, 0, 0.45) ;color:#fff; display: inline; padding: .4em; line-height: 140%;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</span></p>            
    </body>
</html>

Upvotes: 2

Related Questions