html - 背景图像 :url not working for amazon s3 image

Question

我想要什么

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

CSS 类

.user-area{
    background-image:url('<%=@user.background_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;
}

问题

图像在浏览器上不可见，但是当我访问 amazon s3 url(在 css 类上生成)时，我可以查看图像。

并且浏览器也为此文件抛出 403 错误，是加载资源失败:服务器响应状态为 403(禁止访问)

Answer 1

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

变更前

.user-area{
     background-image:url('<%=@user.background_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;
    }

然后我从类中单独移动了 background-image 属性并作为内联 css 直接添加到我的 div，然后它就像魅力一样工作..

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

我并不是说这是最好的解决方案，但它足以满足我的代码工作流程。