[英]css background-image doesn't work on table object
在我的Django應用中,我想將背景圖片放在表格中。 問題是圖像不顯示。 這是代碼:
<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>
如果我將相同的CSS樣式放在div對象中,則所有工作正常。 例如:
<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>
我的錯誤在哪里? 非常感謝您的幫助
EDIT1
我想在Django模板中插入電子郵件html文件。 我使用'include'並且所有圖像都適用,但不適用於背景圖像樣式。 圖像位置是正確的(如果我使用“ div”而不是“ table”,那么所有作品都正確)。 我有引導
EDIT2
這是完整的代碼。 在表格中我看不到背景圖片
<!-- ======= 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;"> </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;"> </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;"> </td></tr>
</table>
<!-- ======= end section ====== -->
你省了!
在您的!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>
但由於您的字段中沒有tr
, td
等,因此可能仍無法顯示,請嘗試:
<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>
嘗試這個
<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>
文件夾結構
css.css
靜態的/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.