如何旋轉按鈕元素背景而不旋轉按鈕本身

Question

我正在嘗試旋轉按鈕內部的背景圖像，但似乎只獲得指定的背景顏色，而不是頂部的背景圖像。 我有照片的透明部分，可以在按鈕上創建類似拱形的外觀。 這是我的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

這是因為您在background-image屬性上使用了background 速記符號。

 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> 

但是請注意，圖像將位於文本的頂部，使用z-index:-1會將偽元素放置在按鈕下方 ...我建議使用內部跨度來解決此問題。

 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>