Блог

Главная - Вопросы по программированию - Фоновое изображение поверх div

Фоновое изображение поверх div

#html #css #background

#HTML #css #фон

Вопрос:

Я хочу создать фоновое изображение, которое будет видно поверх 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>

Комментарии:

1. (../images /logo.png) это изображение не загружается

2. Виноват, не знал, как это сделать. Теперь исправлено

Ответ №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>