div上的背景图片

时间:2016-10-21 00:24:48

标签: html css background

我想在div上看到背景图片。我用z-index尝试的任何东西都没有帮助我。图像本身没有标准形状和发光边框。理想情况下,图像结束“logo2”应该模仿box-shadow参数“发光”。但是我试过的“logo2”总是在“logo”上面穿过图像。这就是我希望它像http://homeworld.su/logo2.png

的样子

.logo {
    background: url(http://homeworld.su/logo.png) no-repeat;
    height: 200px;
    z-index:100;
    position:relative;
}
.logo2 {
	width: 100%;
	height: 50px;
	background-color: #000;
	padding: 10px 0px 10px 0px;
	border-radius: 10px;
    border: 1px solid #7b0000;
	box-shadow: 0px 0px 2px 2px #d09d00;
    position:relative;
	z-index:10;
    <div class="logo">
	<div class="logo2"></div>
    </div>

1 个答案:

答案 0 :(得分:0)

我想这就是你想要的。您可以相应地调整 .logo2 的宽度

&#13;
&#13;
.logo {
    background: url(http://homeworld.su/logo.png) no-repeat;
    height: 200px;
    z-index:100;
    position:relative;
}
.logo2 {
	width: 20%;
	height: 40px;
	background-color: #000;
	padding: 10px 0px 10px 0px;
	border-radius: 10px;
        border: 1px solid #7b0000;
	box-shadow: 0px 0px 2px 2px #d09d00;
        position:absolute;
        top:10px;
        left:495px;
&#13;
    <div class="logo">
	<div class="logo2"></div>
    </div>
&#13;
&#13;
&#13;