动态设置背景图像
[英]Dynamically set background image
问题描述
I need to apply a background-image to a div that gets set dynamically. 
我需要将背景图像应用于动态设置的div。 So the editor uploads an image on a specific page to a specific attribute and I catch this image then and display those. 因此，编辑器将特定页面上的图像上传到特定属性，然后我会捕获此图像并显示这些图像。
Therefore I'd do something like this: 因此，我会做这样的事情：
<div class="foo" style="background:url(<?php echo $attribute; ?>) no-repeat top right; background-size: 140px;">
Is there a better approach to it by not using style="..." ? 不使用style =“...”是否有更好的方法？
Thanks 谢谢
5 个解决方案
解决方案1
4 已采纳 2015-04-27 08:03:54
You approach is correct but I would change something. 你的方法是正确的但我会改变一些东西。
In the css I would make this: 在css我css ：
.foo {
background-repeat: no-repeat;
background-position: top right;
background-size: 140px;
}
And in the HTML i would only keep the url. 在HTML我只会保留网址。
<div class="foo" style="background:url(<?php echo $attribute; ?>);">
This way on the server-side it's easier to see where you have dynamic content. 这样，在服务器端，您可以更轻松地查看动态内容的位置。 And you only need to change the url for the corresponding image. 而且您只需要更改相应图像的URL。
So if later you work with another developer he knows exactly where he should change the images without going to your css. 因此，如果以后您与另一位开发人员合作，他就会确切地知道他应该在哪里更改图像，而无需转到您的CSS。
解决方案2
3 2015-04-27 08:08:56
If you fundamentally don't want to use style html attribute, you could create many css classes with description of background-image property 如果您从根本上不想使用样式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')
}
And html generation will look like: 而html生成将如下所示：
<div class="foo my-background my-background-<?= $attribute ?>">
But if you choose this solution and number of css classes will be large I recommend you use style attribute despite your desire to refuse of this attribute 但是如果您选择此解决方案并且css类的数量会很大，我建议您使用style属性，尽管您希望拒绝此属性
解决方案3
3 2017-06-20 11:56:54
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>
解决方案4
0 2015-04-27 08:05:38
you can have the css defined in the php side so it will look like that: 你可以在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>
解决方案5
0 2015-04-27 08:06:39
You could point to background.jpg, for all users, but redirect that request to a backend (PHP?) function instead (you redirect with .htaccess for apache). 您可以为所有用户指向background.jpg，但是将该请求重定向到后端（PHP？）函数（您使用.htaccess重定向到apache）。 And in this function you could check the location of the image that would exist if the user had uploaded an image, and then return this binary string as a JPEG. 在此功能中，您可以检查用户上传图像时存在的图像位置，然后将此二进制字符串作为JPEG返回。 Then you could actually link to background.jpg in the external CSS. 然后你可以实际链接到外部CSS中的background.jpg。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.