Question

我希望背景图片高于所有文字。下面是我的代码

<style>

            body {
                background-image: url('http://test.sixorbit.com/rpkfiles/cancelled.png')!important;
                background-repeat: no-repeat;

                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                position: relative!important;
                z-index: 500!important;


            }

</style>

如何在文本上方而不是在后面显示所有背景图像。

Answer 1

尝试:before或:after伪

    body:before{
content:"";
width:100vw;
height:100vw;
z-index:500;
background-image:url(image path);
}

Answer 2

背景不能移动到容器的元素上方，而是可以使用另一个元素并使用positionning和z-index使其上面。所以你可以尝试使用这样的伪元素：

＆＃13;

body {
 min-height:100vh;
 position:relative;
 background:#f2f2f5;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-image: url('http://test.sixorbit.com/rpkfiles/cancelled.png')!important;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 500!important;
}

＆＃13;

<div>
  content
</div>

＆＃13;

Answer 3

由于您的问题发表评论，我已经准备了一个工作演示如何使用其他元素。它也可以是body:after伪元素。

不需要z-index，!important等。

＆＃13;

table {width: 100%; background: green;}

#overlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-image: url('http://test.sixorbit.com/rpkfiles/cancelled.png');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<table>
  <tr>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
  </tr>
  <tr>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
  </tr>
  <tr>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
  </tr>
  <tr>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
  </tr>
  <tr>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
  </tr>
  <tr>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
    <td>....</td>
  </tr>
</table>

<div id="overlay"></div>

＆＃13;

Answer 4

我建议使用.wrapper代替身体。这样，您可以将图像相对于发票大小放置

jsFiddle

.wrapper:after {
    content: "";
    top:0;
    width: 100%;
    height: 100%;
    background: url('http://test.sixorbit.com/rpkfiles/cancelled.png') no-repeat bottom right /contain;
    position: absolute;
    z-index: 500;
}

.wrapper{
    display: inline-block;
    position: relative;
}

<div class="wrapper">
  <img src="http://www.xininventory.com/blog/wp-content/uploads/2014/11/sample-tax-invoice.jpg" alt="">
</div>

打印

4 个答案:

jsFiddle