如何使用纯CSS堆叠文字？

Question

I want to use a text as the background for another text. Basically, this is quite easy by using two div elements with appropriate position and z-index settings, as described in Is there a way to use use text as the background with CSS? .

My problem is that I want to align both texts, although they are different in size. The background text is bigger, and the foreground text shall be aligned vertically with the background one, so that both texts' vertical center is at the same position.

I can achieve this by manually adjusting the position in pixels, but I have to do this for every font-size I want to use individually. Moreover, I can never be sure that this works in every browser in the same way.

Is there a better alternative to do this?

Answer 1

I got it by using:

<div style="position: relative; font-size: 100pt; height: 100px;">
  <div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
    B
  </div>
  Sample text
</div>

Using left and line-height properties I am able to align both texts, and when I increase the font-size of the container, their relative alignment stays the same.

Answer 2

Vertical align can be done like this:

.parent {
position:relative;
zoom:1;/*has layout for ie*/
}
.verticalcentered1, .verticalcentered2 {
position:absolute;
top:50%;
height:20px;
margin-top:-10px;/*half the height*/
}
.verticalcentered1 {z-index:1;}    
.verticalcentered2 {z-index:2;}

If the verticalcentered elements are youre texts they will be vertically centered in the parent and be on top of each other, if thats what youre looking for.

Answer 3

i think you are looking like this :- DEMO

HTML

<div id="container">
        <div id="background">Sample Some Text </div>
        B
</div>

CSS

#container {
    position: relative;
    font-size:70px;
    color:#00c7ff;
    z-index:-1; 
}

#background {
    left: 20px;
    position: absolute;
    right: 0;
    top: 25%;
    z-index: 10;
    color:black;
    font-size:20px;
}

Answer 4

Yeah ofcourse you can user alternative way - Placeholder text

Text will be automatically removed when you type the new text then default text will be remove

//textbox

<input  type="text" defaultvalue="Name" value="Name" name="add_name" id="add_name">

//Javasript Code

//For the placeholder
    $('#add-category input[type=text]').focus(function() {

        if ($(this).val() == $(this).attr('defaultValue')) {
          $(this).val('');
        }
      });

      $('#add-category input[type=text]').blur(function() {

        if ($(this).val() == '') {
          $(this).val($(this).attr('defaultValue'));
        } 
    });

Try the above option.