旋转背景图像问题

Question

我找到了本教程我有一个带有背景图像的元素。因此，我想将背景图像设置为:before元素。但是当我尝试时，根本没有背景图像。这是小提琴，您可以看到我设置了背景属性：

background: #6D7B8F url('http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png') -10px -20px no-repeat;

很好。但是，如果您评论了CSS代码和未注释的其他CSS（教程的实现）背景消失。

Answer 1

检查以下是从给定教程中需要的

#settings {
    border: 2px solid #666;
    border-radius: 7px;
    font-size: 2em;
    line-height: 5em;
    margin: 3em auto;
    text-align: center;
    width: 12em;
    transform: rotate(30deg);
    
    overflow: hidden;
    position: relative;
}
#settings::before {
    background: url("http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    height: 200%;
    left: -50%;
    position: absolute;
    top: -50%;
    width: 200%;
    z-index: -1;
    -webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg); 
}

<div id="settings">Test</div>

在这里检查小提琴。

Answer 2

添加z-index属性，在您的：selector

Answer 3

您的代码似乎还不错。您不应使用"溢出：隐藏"，因为它似乎隐藏了小提琴中的背景元素。

.kitten {
  width: 150px;
  height: 150px;
  background-color: pink; 
}
.kitten::before {
  position: absolute;
  left: 100px;
  content: "";
  display: block;
  background: url(http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif);
  background-size: contain;
  width: 250px;
  height: 250px;
}

<div class="kitten"></div>