Question

我需要将背景图像应用于动态设置的div。因此，编辑器将特定页面上的图像上传到特定属性，然后我会捕获此图像并显示这些图像。

因此我会做这样的事情：

<div class="foo" style="background:url(<?php echo $attribute; ?>) no-repeat top right; background-size: 140px;">

不使用style =“...”是否有更好的方法？

由于

Answer 1

你的方法是正确的，但我会改变一些东西。

在css我会这样做：

.foo {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 140px;
}

在HTML我只保留网址。

<div class="foo" style="background:url(<?php echo $attribute; ?>);">

这样在服务器端，您可以更轻松地查看动态内容的位置。而且您只需要更改相应图像的URL。

因此，如果稍后您与其他开发人员合作，他就会确切知道应该在何处更改图片，而无需转到您的CSS。

Answer 2

如果您从根本上不想使用样式html属性，则可以创建许多带有 background-image 属性

的描述的css类

.my-background { 
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 140px
}
.my-background_custom2 {
     backgroud-image: url('/path/1/to/your/image.png') 
}
.my-background_custom2 {
     backgroud-image: url('/path/2/to/your/image.png') 
}

html生成将如下所示：

<div class="foo my-background my-background-<?= $attribute ?>">

但是如果你选择这个解决方案并且css类的数量会很大我建议您使用样式属性，尽管您希望拒绝此属性

Answer 3

you can use this  html & php code:

HTML:
<style type="text/css">
.bannar {    
    width: 100%;
    height: 361px;
    background: no-repeat center;   
}
</style>

PHP:

<div class="bannar" 
style="background-image: url('<?php echo $this->webroot . 'companyImages/bannar' . '/' . $company_page[0]['companypages']['bannar']; ?>')">
</div>

Answer 4

你可以在php端定义css，所以它看起来像那样：

<?php
    $backgroundCss = '<style>#uniqueback{
            background:url('.$attribute.') no-repeat top right; background-size: 140px;
            };</style>';
?>

<html>
    <head>
        <?php echo $backgroundCss;?>

    </head>
        <body>
            <div id="uniqueback" class="foo" ></div>
        </body>
</html>

Answer 5

您可以为所有用户指向background.jpg，但是将该请求重定向到后端（PHP？）函数（您使用.htaccess重定向到apache）。在此功能中，您可以检查用户上传图像时存在的图像位置，然后将此二进制字符串作为JPEG返回。然后你可以实际链接到外部CSS中的background.jpg。

动态设置背景图像

5 个答案: