Question

更新。表ID样式：

#card {
position:absolute;
border-spacing:0;
border-collapse:collapse;
background-color:#6e97db;
height:720px;
width:100%;
}

EDITED

HTML来源：

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="styles/all.css" />
<link rel="stylesheet" href="styles/formbacks.css" />
<link rel="stylesheet" href="styles/slideshow.css" />

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>

<link href='//fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

<title>Trading Card Generator</title>
<meta name="Description" content="Trading Card Generator - Create Your Own Comics, Predators & Tennis Trading Cards" />
<meta name="Keywords" content="Trading Card Generator, trading card maker, top trumps trading cards" />

<script>
$(function(){
$(document).click(function(){  
$('.messagebox').hide();
});
});
</script>

<style> 
@font-face {
font-family:TCG;
src: url(xirod.ttf);
}

@font-face {
font-family:TCGHEADING;
src: url(GearsOfPeace.ttf);
}

@font-face {
font-family:TCGAUTHOR;
src: url(kenyancoffeerg.ttf);
}

@font-face {
font-family:TCGPN;
src: url(GearsOfPeace.ttf);
}

div {font-family:TCG;}
div {font-family:TCGHEADING;}
div {font-family:TCGAUTHOR;}
div {font-family:TCGPN;}
</style>

</head>

<body id="bodyform">

<p class="header"><a href="index.php">Trading Card Generator</a></p>

<p class="disclaimer">DC vs Marvel&nbsp;<br />
Card Back Face<br />
This is a non profit website.</p>

<ul id="navigation">
<li><a href="#">create</a><ul>
<li><a href="backfacecreate.php">back face</a></li>
<li><a href="bcardscreate.php">business</a></li>
<li><a href="comicscreate.php">comics</a></li>
<li><a href="predatorscreate.php">predators</a></li>
<li><a href="tenniscreate.php">tennis</a></li>
</ul></li>
<li><a href="#">edit</a><ul>
<li><a href="backfaceedit.php">back face</a></li>
<li><a href="bcardsedit.php">business</a></li>
<li><a href="comicsedit.php">comics</a></li>
<li><a href="predatorsedit.php">predators</a></li>
<li><a href="tennisedit.php">tennis</a></li>
</ul></li>
<li><a href="register.php">register</a><ul>
</ul></li>
<li><a href="#">themes</a><ul>
<li><a href="backfacedisplay.php">back face</a></li>
<li><a href="bcardsdisplay.php">business</a></li>
<li><a href="comicsdisplay.php">comics</a></li>
<li><a href="predatorsdisplay.php">predators</a></li>
<li><a href="tennisdisplay.php">tennis</a></li>
</ul></li>
<li><a href="logout.php">logout</a></li>
<li><a href="contact.html">contact</a></li>
</ul>

<div class="previouscard"></div>

<div class="bouncein">

<table id="card">
<tr>
<td style="background-color:#211e1e"></td>
</tr>
<tr>
<td><p class="tcg">Trading Card Generator</p></td>
</tr>
<tr>
<td class="tcgnamecell">DC vs Marvel<br/> Heroes &amp; Villains</td>
</tr>
<tr>
<td class="tcgimagecell"><img class="imgsize" alt="" src="uploads/Darkseid.png" /></td>
</tr>
<tr>
<td><p class="author">Created by M B Mehdi</p></td>
</tr>
</table>
</div>

<div class="nextcard"></div>
<div class="currentcard">Card 1 of 1</div><br><br>
<div class="currentcard"><a id="carddownload" href="#card" class="downloadbtn">Download</a></div>
</div>

<div id='loader'><img src="images/ajax-loader.gif" alt="loader"/></div>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var $loading = $('#loader').hide();
$('#carddownload').on('click', function() {
showimage(); 
});
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
function showimage(){
html2canvas([document.getElementById('card')], {
onrendered: function(canvas)
{
var img = canvas.toDataURL()
$.post("save.php", {data: img}, function (file) {
window.location.href ="downloadbusinesscard.php?path="+ file}); 
}
});
}
</script>
</body>
</html>

我有一个允许用户为卡片背面创建设计的表单。用户输入标题，名称，背景颜色并上传小图像。然后将其显示在桌子内，看起来像一张大型扑克牌，中间有一个小图片，上面和下面有文字。

我使用fetch数组遍历结果并将它们存储为数组：

$result = mysql_query("SELECT * FROM tcgbackface JOIN tcgbackfaceimages ON tcgbackface.id = tcgbackfaceimages.id WHERE tcgbackface.username='$user' ORDER BY tcgbackface.id")
or die(mysql_error());
$count = mysql_num_rows($result);
while($row = mysql_fetch_array($result)){
$theme[]= $row['theme'];
$subheading[]= $row['subheading'];
$author[]= $row['author'];
$bgcolour[]= $row['bgcolour'];
$img_paths[] = $row['path'];
}

然后将它们显示回桌面内的用户，但当我回显背景颜色时，它不会显示，并且默认情况下在css中设置的背景颜色仍为：

<table id="card">
<tr>
<td style="background:<?php echo $bgcolour[$i]; ?>">
</tr>
<tr>
<td><p class="tcg">Trading Card Generator</p></td>
</tr>
<tr>
<td class="tcgnamecell"><?php echo $theme[$i]."<br/> ".$subheading[$i];?></td>
</tr>
<tr>
<td class="tcgimagecell"><?php echo '<img class="imgsize" alt="" src="'.$img_paths[$i].'" />'; ?></td>
</tr>
<tr>
<td><p class="author">Created by <?php echo $author[$i];?></p></td>
</tr>
</table>

Answer 1

尝试

style="background-color:<?php echo $bgcolour[$i]; ?>"

<强> - 编辑 -

我认为您的$bgcolour[$i]可能为空或者不是颜色的有效十六进制值。

<强> - EDIT2 -

尝试向您的<td>元素添加固定高度，以查看其高度是否等于0.因为它似乎是空的。

style="height:50px;background-color:<?php echo $bgcolour[$i]; ?>;"

Answer 2

我认为问题在于你的CSS表格胜过你的Style =＆＃34;＆＃34;码。确保添加以下内容：

style="background:<?php echo $bgcolour[$i]; ?> !important"

Answer 3

假设您在此处显示的代码是您的实际代码，则无效。

<td style="background:<?php echo $bgcolour[$i]; ?>">

没有结束

</td>

应该是

 <td style="background:<?php echo $bgcolour[$i]; ?>"></td>

这不是一个需要使用的问题！重要，因为内联样式总是胜过样式表。您不需要使用背景颜色，因为CSS足够聪明，可以知道。

您是在数据库中存储#FFFFFF还是只存储FFFFFF？如果您没有将＃存储在数据库中，那么您需要在输出中存储＃。

Answer 4

感谢大家的帮助。我应该列出表格id样式并解释我使用它来代替样式而不是td元素。

<table id="card" style="background-color:<?php echo $bgcolour[$i]; ?>">

php - 更改表格背景颜色与数据库表字段中存储的值？

4 个答案: