html/css를 사용하여 테이블의 전체 화면에서 배경 이미지 늘이기

Question

테이블이 있고 너비에 관계없이 특정 배경이 TD의 너비에 걸쳐 펼쳐지 길 원합니다.

관련 td에 대한 나의 CSS는 다음과 같이 현재 :

.tools .theader 
{ 
margin:1px;background-color:#ffffcc; 
background:url(../images/td_bg.png) no-repeat center center; 
} 

과 HTML은 다음과 같이 진행됩니다

: 여기

<table class'tools'> 
<tr> 
<td class='theader' colspan=2> 
Background 
</td> 
... 

나는 결과에서 무엇을 얻을의 이미지의를

푸른 색 경사 된 배경이 정확히 각 가운데에 맞는지 확인할 수 있습니다 td . td의 가장자리에 뻗어서 전체 td 모양이 빗나가게하고 싶습니다. 어떻게 할 수 있습니까? 당신은 CSS 구배를 사용할 수 있습니다

Answer 1

대신

HTML

<table class'tools'> 
<tr> 
<td class='theader' colspan="2"> 
    <span>Background</span> 
</td> 
    </tr> 
    </table> 

CSS

.theader > span{ 
    color:white; 
    padding:6px 10px; 
    background: #fffcfc; /* Old browsers */ 
background: -moz-linear-gradient(top, #fffcfc 0%, #2989d8 12%, #2989d8 51%, #207cca 96%, #ffffff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffcfc), color-stop(12%,#2989d8), color-stop(51%,#2989d8), color-stop(96%,#207cca), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcfc', endColorstr='#ffffff',GradientType=0); /* IE6-9 */ 

} 

DEMO

HERE은 CSS 그라디언트를 생성하는 데 가장 좋은 도구입니다.