简体   繁体   English

CSS背景图像不适用于表格对象

[英]css background-image doesn't work on table object

in my Django app I would like to put a background image in a table. 在我的Django应用中,我想将背景图片放在表格中。 The problem is that the image doesn't show. 问题是图像不显示。 This is the code: 这是代码:

<table style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat: repeat-x ;background-size: 40px 3px">
Hello!
</table> 

If I put the same css style in div object all work. 如果我将相同的CSS样式放在div对象中,则所有工作正常。 Eg: 例如:

<div style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat: repeat-x ;background-size: 40px 3px">
Hello!
</div> 

Where is my mistake? 我的错误在哪里? Thanks a lot for the help 非常感谢您的帮助

EDIT1 EDIT1

I would like to insert a email html file in a django template. 我想在Django模板中插入电子邮件html文件。 I use 'include' and all works for image but doesn't works for background-image style. 我使用'include'并且所有图像都适用,但不适用于背景图像样式。 The image location is correct (if I use 'div' and not 'table' all works). 图像位置是正确的(如果我使用“ div”而不是“ table”,那么所有作品都正确)。 I have bootstrap 我有引导

EDIT2 EDIT2

This the complete code. 这是完整的代码。 In the table I don't see the background image 在表格中我看不到背景图片

<!-- ======= section ======= -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="34302d" style="background-image: url('http://themastermail.com/envato/omail/demo/layout2/img/testi-bg.jpg') !important; background-size: cover; background-position: top center; background-repeat: no-repeat;" background="http://themastermail.com/envato/omail/demo/layout2/img/testi-bg.jpg">

    <tr><td height="60" style="font-size: 60px; line-height: 60px;">&nbsp;</td></tr>

    <tr>
        <td align="center">

            <table border="0" width="590" align="center" cellpadding="0" cellspacing="0" class="container590">

                <tr>
                    <td>
                        <table border="0" width="580" align="center" cellpadding="0" cellspacing="0" class="container580">

                            <tr>

                                <td align="center" style="color: #b9bcc7; font-size: 16px; font-family: 'Open Sans', Calibri, sans-serif; line-height: 30px;" class="title_color">
                                    <!-- ======= section text ====== -->

                                    <div style="line-height: 30px">

                                            <em>Proin eget massa tincidunt, lobortis ex nec, placerat odio. Mauris gravida nulla id laoreet ornare. Maecenas sagittis elit metus, eget pellentesque couleur non categorize rouge vert bleu.</em>

                                    </div>
                                </td>

                            </tr>

                        </table>
                    </td>
                </tr>

                <tr><td height="35" style="font-size: 35px; line-height: 35px;">&nbsp;</td></tr>

                <tr>
                    <td align="center">
                        <table border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="left" width="80">
                                    <a href="" style=" border-style: none !important; border: 0 !important;"><img src="http://themastermail.com/envato/omail/demo/layout2/img/testi-img.png" style="display: block; width: auto;" width="70" border="0" alt=""/></a>
                                </td>

                                <td align="left" style="color: #ffffff; font-size: 14px; font-family: Raleway, Calibri, sans-serif; mso-line-height-rule: exactly; line-height: 24px;" class="title_color">

                                    <!-- ======= section header ======= -->

                                    <div style="line-height: 24px;">

                                            Marta Clarcks<br><a href="" style="color: #f29a27; text-decoration: none;">envato.com</a>

                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
        </td>
    </tr>

    <tr><td height="60" style="font-size: 60px; line-height: 60px;">&nbsp;</td></tr>

</table>
<!-- ======= end section ====== -->

You left out the ! 你省了! on your !important tag. 在您的!important标签上。

<table style="background-image: url('/static/assets/img/myimage.png') !important;background-position: 0 100% !important;background-repeat: repeat-x !;background-size: 40px 3px">
Hello!
</table>

but as you've not got a tr , td etc in your field it may still not display it, you should try: 但由于您的字段中没有trtd等,因此可能仍无法显示,请尝试:

<table style="background-image: url('/static/assets/img/myimage.png') !important;background-position: 0 100% !important;background-repeat: repeat-x !;background-size: 40px 3px; display: block;">
  <tr>
    <td>
      <p>hello</p>
    </td>
  </tr>
</table> 

try this 尝试这个

    <table style="background-image: url('static/assets/img/myimage.png') !important;background-position: 0 100% !important;background-repeat: repeat-x !;background-size: 40px 3px">
    <tr><td>Hello!</td></tr>
    </table> 

folder structure 文件夹结构
css.css css.css
static/ 静态的/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM