Question

我找到this tutorial 我有一个带背景图片的元素。所以我想将背景图像设置为:before元素。但是当我尝试它时，根本没有背景图像。这是fiddle如你所见，我设置了背景属性：

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

没关系。但是如果你评论那个css代码并取消注释其他css（教程的实现）背景就会消失。

Answer 1

将z-index property添加到您的：选择器之前

Answer 2

你的代码似乎很好。你不应该使用'overflow：hidden'，因为它似乎隐藏了小提琴中的背景元素。

.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>

Answer 3

根据给定的教程

检查以下哪些内容

＆＃13;

#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); 
}

＆＃13;

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

＆＃13;

检查the packetCreate event

旋转背景图像问题

3 个答案: