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

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 shorthand 符号。

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>