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属性上使用background-image 简写表示法。

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>

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

1 个答案: