Question

所以我的网站上有一堆.png文件。我正在使用.png文件，因为我将它们放在其他图像的顶部以创建一个模型。我目前有.png的超链接，所以点击用户直接指向.png文件（即。＆＃34; www.website.com/images/theimage.png"）。

这一切都运行良好，然而，我的一些.png文件中有一些白色，因为它们分层在深色背景图像之上。因此，当用户被定向到.png文件时，他们无法看到任何白色区域，因为身体默认背景颜色（或缺少）是白色的。有没有办法将css规则动态传递给浏览器用来显示.png的页面上的body标签？我想使用PHP或CSS或其他类似的东西。

因此，在链接中，我想添加一些传递到http://www.website.com/images/theimage.png页面的数据，其中包含要使用的背景颜色。我想的可能是：

<a href="http://www.website.com/images/theimage.png?backround=black">Link</a>

或

<a href="http://www.website.com/images/theimage.png" target="background:black">Link</a>

我只是不知道。

我已经用Google搜索了大约30分钟，我无法找到任何可以做到这一点的技巧。提前致谢。

Answer 1

您是否使用PHP动态获取该链接中的文件名？如果是这样，你可以很容易地实现它（前提是你还管理PHP中包含div的css样式）。

将所需的背景颜色添加到png文件的名称（如image-000000.png）。现在，图像名称包含页面上显示的首选背景颜色。
在PHP中解析名称，将背景颜色转换为变量（使用substring或explode），例如$imagecolour = substr(imagename,10,16);
更改包含元素的css规则（如echo style="background-color:$imagecolour"）。

您还可以使用html data属性从图像容器中传递背景颜色。

如果使用javascript或jquery，则可以对图像容器的id / class执行相同操作。假设颜色在数据元素中，如

<image src="image.png" data-bgcolour="000000" class="image-bg-element" />

然后

var newbg = $('.image-bg-element').data('bgcolour'); $('.image-bg-element').css('background-color', "#"+newbg);

Answer 2

您无法通过直接链接到图像文件来实现这一目标。最好的选择是使用PHP输出图像并相应地更改背景，因此链接将是PHP页面而不是图像直接。 E.G

<a href="http://www.website.com/images/show.php?image=theimage.png&backround=black">Link</a>

然后在PHP文件中执行以下操作：

<?php
    if (in_array($_GET['background'], $validBackgrounds) && in_array($_GET['image'], $validImages)) {
    $background = $_GET['background'];
    $image = $_GET['image'];
?>
    <div style="background: <?= echo $background?>">
        <img src="<?=$image?>" />
    </div>
<?php
}
?>

注意：要非常小心地在页面上回显$_GET参数，您最好先添加验证，以确保图像和背景有效且不会包含恶意代码

超链接到.png文件时动态添加背景颜色

2 个答案: