gpt4 book ai didi

php - 如何将动态图像作为 CSS 背景?

转载 作者:可可西里 更新时间:2023-10-31 22:05:24 24 4
gpt4 key购买 nike

我有一个 Logo div,我想使用我的 Logo 图像作为背景,例如:

.logo {
background: #FFF url(images/logo.jpg);
}

但是,在我脚本的设置页面上,我希望有一个文本输入字段来指定背景图像的图像 URL。

如何将此 div 的背景图像设置为输入的图像 URL 而无需执行以下操作:

<div><img src="/images/logo.jpg" /></div>

(脚本是用PHP编写的)

最佳答案

这里有两个动态设置背景图片的选项。

  1. 将嵌入式样式表放入文档的 <head> 中:

    <style type="text/css">
    .logo {
    background: #FFF url(<?php echo $variable_holding_img_url; ?>);
    }
    </style>
  2. 定义 background-image内联 CSS 属性:

    <div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>

注意:确保在将输入保存到数据库之前对其进行清理(参见 Bobby Tables )。确保它不包含 HTML 或任何其他内容,仅包含有效的 URL 字符、转义引号等。如果不这样做,攻击者可以将代码注入(inject)页面:

"> <script src="http://example.com/xss-attack.js"></script> <!--

关于php - 如何将动态图像作为 CSS 背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11303891/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com