2013-07-08 3 views
1

배경 이미지를 적용하려고하지만 표시되지 않는 테이블이 있습니다. 이미지 경로 (방화 광 이미지를로드 말한다) 권리이고 테이블의 크기는 이미지 크기 (156X46px)왜 테이블 배경이 보이지 않습니까?

HTML과 동일합니다 :

<!--hazard icons start here --> 
       <table class="hazard-table"> 
       <tr> 
        <td> 1 </td> 
        <td> 1 </td> 
        <td> 1 </td> 

       </tr> 
       <tr> 
        <td> 1 </td> 
        <td> 1 </td> 
        <td> 1 </td> 

       </tr> 


       <!-- hazard icons end here --> 
       </table> 

CSS : A와

table.hazard-table { 
    background:url('../images/icon-item.png') no-repeat; 
    width:156px; 
    height:46px; 
    border-width: 1px; 
    border-spacing: 2px; 
    border-style: solid; 
    border-color:#ebebeb; 
    border-collapse: collapse; 
    background-color: white; 
} 
table.hazard-table th { 
    border-width: 1px; 
    padding: 1px; 
    border-style: inset; 
    border-color: #ebebeb; 
    background-color: white; 
    -moz-border-radius: ; 
} 
table.hazard-table td { 
    background-position:30 20 ; 
    border-width: 1px; 
    padding: 1px; 
    border-style: inset; 
    border-color: #ebebeb; 
    background-color: white; 
    -moz-border-radius: ; 
} 

답변

2
table.hazard-table { 
    background:url('../images/icon-item.png') no-repeat; 
    width:156px; 
    height:46px; 
    border-width: 1px; 
    border-spacing: 2px; 
    border-style: solid; 
    border-color:#ebebeb; 
    border-collapse: collapse; 
    background-color: white; 
} 

이 :

background-color: white; 

재정 흰색의 배경 이미지. 대신 수행해야합니다

table.hazard-table { 
     background:white url('../images/icon-item.png') no-repeat; 
     width:156px; 
     height:46px; 
     border-width: 1px; 
     border-spacing: 2px; 
     border-style: solid; 
     border-color:#ebebeb; 
     border-collapse: collapse; 
} 

편집 :

이 시도 :이 fiddle 링크가 당신을 위해 작동합니다

table{ 
.hazard-table { 
    background:white url("../images/icon-item.png") no-repeat; 
    width:156px; 
    height:46px; 
    border-width: 1px; 
    border-spacing: 2px; 
    border-style: solid; 
    border-color:#ebebeb; 
    border-collapse: collapse; 


    th{ 
     border-width: 1px; 
     padding: 1px; 
     border-style: inset; 
     border-color: #ebebeb; 
     background-color: white; 
     -moz-border-radius: ; 
     } 

     td{ 
      background-position:30 20 ; 
      border-width: 1px; 
      padding: 1px; 
      border-style: inset; 
      border-color: #ebebeb; 
      background-color: white; 
      -moz-border-radius: ; 
     } 
} 
+0

Woops. 나는 그 배경색을 완전히 놓쳤다 : 흰색; 좋은 직장 :) – zuc0001

+0

당신이 말한대로 그것을 바 꾸었습니다. – Aneesh

+0

try ['code'] background-image : url ('../ images/icon-item.png'); background-repeat : no-repeat; background-color : #fff; ['code'] – zuc0001

1
} 
table.hazard-table td { 
    background-position:30 20 ; 

초보자는 배경 위치가 픽셀 또는 "중심"이어야합니다.

} 
table.hazard-table td { 
    background-position:30px 20px ; 

이렇게하면 문제가 해결 될 수 있습니다.

+0

고맙지 만 문제가 해결되지 않았습니다. – Aneesh

1

희망을.

table.hazard-table { 
    /* background:url('../images/icon-item.png') no-repeat 0 0;*/ 
    background:url('http://img.talkandroid.com/uploads/2013/03/wpid-photo-jan-14-2013-1115-am.jpg') no-repeat 0 -550px; 
    width:156px; 
    height:46px; 
    border-width: 1px; 
    border-spacing: 2px; 
    border-style: solid; 
    border-color:#ebebeb; 
    border-collapse: collapse; 
    /* background-color: white;*/ 
} 
table.hazard-table th { 
    border-width: 1px; 
    padding: 1px; 
    border-style: inset; 
    border-color: #ebebeb; 
    background-color: white; 
    -moz-border-radius: ; 
} 
table.hazard-table td { 
    background-position:30 20 ; 
    border-width: 1px; 
    padding: 1px; 
    border-style: inset; 
    border-color: #ebebeb; 
    /* background-color: white;*/ 
    -moz-border-radius: ; 
} 
관련 문제