Question

嗨我有一张桌子和一张背景图片，我想在桌子的边框上看20px。问题是背景坚持了测试的边缘。

index.css

.noteback {
  border-spacing: 20px  ; 
  align:center ;
  background-image: url(Images/backGround.png);
  background-repeat:  inherit ;

的index.htm

<table class="noteback" >
     <tr>
        <td>
            Test Test Test Test Test Test Test Test Test Test.............   
        </td>
    </tr>

Answer 1

如果您有平面颜色，请使用以下代码

＆＃13;

table {
  padding: 20px;
  border: 1px solid #000; /*remove border, it is only for testing purpose*/
}
table td {
  background-color: #000; /*replace color with your image*/
  color: #fff;
  padding: 20px;
}

＆＃13;

<table class="noteback">
  <tr>
    <td>
      Test Test Test Test Test Test Test Test Test Test.............
    </td>
  </tr>
</table>

＆＃13;

如果您有图片，请使用:before或:after

＆＃13;

table {
  position: relative;
  padding: 20px;
  border: 1px solid #000;
}
table:before {
  content: '';
  background: url(http://www.hdwallpapersimages.com/wp-content/uploads/images/Child-Girl-with-Sunflowers-Images.jpg) no-repeat center;
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: -1;
}
table td{
  padding: 20px;
}

＆＃13;

<table class="noteback">
  <tr>
    <td>
      Test Test Test Test Test Test Test Test Test Test.............
    </td>
  </tr>
</table>

＆＃13;

如果您需要任何帮助，请与我们联系：）

CSS：border-spacing：和background-image：不能一起工作

1 个答案: