CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 4484

Darken the background beneath white text in CSS

I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.

This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/

This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.

Upvotes: 6

Views: 17790

Answers (8)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
  color: white;
  text-shadow: 0 1px black;
}

.dark {
  background: #333;
}

.light {
  background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>

Or you can ever merge our two approaches.

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}

.dark {
  background: #333;
}

.light {
  background: #ccc;
}

span {
  color: white;
  text-shadow: 0 1px black;
  background: #333;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>

The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.

It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.

Upvotes: 8

vitdes
vitdes

Reputation: 124

I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.

You can add opacity only to background:

rgba(255,0,0,0.5)

Check this post

Upvotes: 0

chaenu
chaenu

Reputation: 2025

There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:

img {
    filter: brightness(20%);
}

A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK

Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.

For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/

Upvotes: 0

Alex
Alex

Reputation: 7833

The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7

<div class="box">

    <div class="overlay top">
        text
    </div>

    <img ... />

</div>

.box {
    position: relative;
}

.box .overlay {
    background-color: rgba(0, 0, 0, 0.50);
    color: rgb(255, 255, 255);
    position: absolute;
}
    .box .overlay.top {
        top: 0px;
    }

Upvotes: 1

TannerHolm
TannerHolm

Reputation: 2033

I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.

http://jsfiddle.net/3w34k1ea/

    .img-wrapper{
    width: 100%;
    height: 100%;
    background: #000;    
}
     img {
      width: 100%
        height: 100%;
        opacity: .5;
}
     img:hover{
    opacity: .3;
}
     p {
    color: white;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 20px;
}

Upvotes: 2

Lee
Lee

Reputation: 4323

Put the text inside a <span> tag and give it a class, then in your CSS file:

span.your-class {
    background:rgba(255,255,255,0.5);
    padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}

This will put the text inside a semi-transparent box ontop of the image. Experiment with your text colour, and the background colour until you're happy.

Here's an example: http://jsfiddle.net/9svp8qoh/

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:

text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px  rgba(0,0,0,1);

FIDDLE

Upvotes: 2

user2640846
user2640846

Reputation: 19

you can use background property of css where in you can give color and image path eg :-

background:#FFFFFF url("image path");

This will add background color to image.

Upvotes: -1

Related Questions