background-image：url无法用于Amazon S3图像

Question

我想要的是

我正在尝试为class设置背景图像，该图像存储在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错误， is a Failed to load resource: the server responded with a status of 403 (Forbidden)

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>

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