html - div 上的背景图像

Question

我想在 div 上显示一个背景图像。我用 z-index 尝试过的任何东西都没有帮助我。图像本身没有标准形状和发光边框。理想情况下，图像结束时“logo2”应该通过 box-shadow 参数模仿“发光”。但是我尝试过的任何东西“logo2”总是在“logo”之上穿过图像。这就是我希望它像 site.com/logo2.png 的样子

.logo {
    background: url(site.com/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>

Answer 1

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

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

    <div class="logo">
	<div class="logo2"></div>
    </div>