2013-04-03 68 views
6

Đây là những gì Tôi đang cố gắng để đạt được:hai dòng văn bản nền với bóng

enter image description here

Nhưng tôi không thể làm nền được miễn là các văn bản trong khi vẫn giữ bóng với toàn bộ nội dung ... tôi chỉ có được điều này:

enter image description here

Như bạn có thể nhìn thấy nó làm cho hai bóng ... đây là đánh dấu và css của tôi:

<span class="interior_title">Samsung, HP Pop-Tops Do Double Duty <br>Rich Jaroslovsky</span> 

span.interior_title{ 
    background: #c7c7c9; 
    font-size: 50px; 
    color: #2f2f31; 
    width: 550px; 
    font-family: 'chaletcomprime'; 
    margin: 0 auto; 
    text-transform: uppercase; 
    line-height: 47px; 
    padding: 0px 15px; 
    margin-left: 90px; 
    -moz-box-shadow: 0 0 7px #000; 
    -webkit-box-shadow: 0 0 7px #000; 
    box-shadow: 0 0 7px #000; 
} 

Bất kỳ ý tưởng nào về cách thực hiện?

+0

tôi nghĩ rằng bạn có thể cần phải tách hai dòng thành hai nhịp –

+0

nó sẽ xảy ra giống nhau, hai nhịp = hai bóng –

Trả lời

0

Example

Nó gần với những gì bạn muốn. Tôi đã làm như thế này. Hai phần tử được thả bên trái dưới một phần tử khác. Cùng một kiểu chỉ có chiều rộng là khác nhau.

<span class="one">Extra line here bal bal bal </span> 
<span class="two">Line TwoM<span> 

Bây giờ vấn đề ở đây là cái bóng bổ sung mà được đúc trên .two, tôi cố định bằng cách sử dụng

.two:before{ 
    background: tan; 
    content: ""; 
    height: 10px; 
    left: 0; 
    position: absolute; 
    top: -10px; 
    width: 100%; } 

Đừng lo lắng về trình duyệt IE, vì :before làm việc trên IE8 như đối với box-shadow nó dừng lại ở IE9.

+0

cảm ơn bạn rất nhiều, nó hoạt động! –

+0

@fxg Bạn được chào đón. –

Các vấn đề liên quan