如何旋转按钮元素背景而不旋转按钮本身

Question

I am trying to rotate the background-image inside of my button but I seem to only be getting the background color I specify, not the background-image over the top. I have a transparent part of the photo to create an arch-like look on the button. Here is my css:

#sign-in-button > div > button.btn.btn-default {
    color: #fff;
    background-color: #da1a32; 
    position: relative;
    overflow: hidden;'

/*  background-image: url('/images/arch-red-flip.png'); */
/*  background-repeat: no-repeat; */
/*  background-size: cover; */  
}

#sign-in-button > div > button.btn.btn-default:before {
    content: "";
    position: absolute;
    z-index: -1;
    background-size: cover;
    transform: rotate(30deg);
    background-image: url('/images/arch-red-flip.png') 0 0 no-repeat;
 }

<div class="col-sm-12">
    <div class="col-sm-6" id="right-border">
        <div class="row" id="sign-in-button">
            <div class="col-xs-3"></div>
            <div class="col-xs-4"></div>
            <div class="col-xs-5">
                <button type="button" class="btn btn-default">SIGN IN</button>
            </div>
        </div>
    </div>
</div>

Answer 1

It's because you are using the background shorthand notation on background-image property.

 button.btn.btn-default { color: #fff; background-color: #da1a32; position: relative; overflow: hidden; padding: 3em; } button.btn.btn-default::before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; transform: rotate(30deg); background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded) 0 0 no-repeat; background-size: contain; } 

 <button type="button" class="btn btn-default">SIGN IN</button> 

Note however that the image will be on top of the text and using z-index:-1 will cause the pseudo-element to be placed under the button...I would recommend an internal span to solve this.

 button.btn.btn-default { color: #fff; background-color: #da1a32; position: relative; overflow: hidden; padding: 3em; } button.btn.btn-default span { position: relative; } button.btn.btn-default::before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; transform: rotate(30deg); background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded) 0 0 no-repeat; background-size: contain; } 

 <button type="button" class="btn btn-default"><span>SIGN IN</span></button>