背景图像：url 不适用于亚马逊 s3 图像

我想要的是

我正在尝试为类设置背景图像，图像存储在亚马逊 s3 上，我通过 Rails 上的回形针对象访问图像

CSS类

.user-area{
    background-image:url('<%[email protected] /cdn-cgi/l/email-protection_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

浏览器上的输出

.user-area{
    background-image:url('https://xyz-customers.s3.amazonaws.com/photos/7/superbackground.jpg?AWSAccessKeyId=xxxxxxxxxxxxx&Expires=1402511741&Signature=xxxxxxxxxxxxxxxx');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

问题

该图像在浏览器上不可见，但是当我访问亚马逊 s3 url（在 css 类上生成）时，我可以查看该图像。

并且浏览器还会针对该文件抛出 403 错误，is a Failed to load resource: the server responded with a status of 403 (Forbidden)

我终于通过对我的 css 代码进行此更改解决了这个问题

变更前

.user-area{
     background-image:url('<%[email protected] /cdn-cgi/l/email-protection_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

改变后

.user-area{
        /*I remove the code for background-image:url and make it as inline css on my div*/
        background-repeat:no-repeat;
        width:1025px !important;
        margin-top:100px !important;
    }

我将背景图像属性从类中单独移出，并直接作为内联 CSS 添加到我的 div 中，然后它就像魅力一样工作。

<div class="user-area" style="background-image: url(<%= @user.background_image.expiring_url %>)">
</div>

我并不是说这是最好的解决方案，但它对于我的代码工作流程来说已经足够了。