Перейти к содержимому

Реферальная программа Мегаплана


Как убрать расстояние которое остается после смещение блока?

#31 lordamid

lordamid
    Topic Starter
  • Пользователь
  • 13 сообщений
  • Репутация: 0
1

Отправлено 25 Апрель 2013 - 23:27

А вы не забыли дать непрозрачный фон блоку с картинкой и текстом? На сколько я помню тот код, который вы показывали в последний раз, там у блока content фона не было вообще никакого.


блок в котором находятся все изображения и текст имеет следующий стиль:

#news    {
	 padding-top: 20px;
	 width: 640px;
	 background-color: #000000;
	 border-radius: 10px;
	 filter: alpha(Opacity=100);
	 opacity: 1;
	 }

  • 0

#32 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 26 Апрель 2013 - 08:27

lordamid,
короче, я забыл про особенность наследования css-свойства opacity потому что оно редко используется:
Свойство непрозрачности (opacity) наследуется всеми дочерними блоками. И потому если у родителя opacity установлено ниже единицы, то увеличить непрозрачность у дочерних блоков невозможно.

Способы вылечить это, например, такие:
* самый простой и кроссбраузерный вариант: Не использовать opacity. Вместо него использовать полупрозрачные пнг-шки в качестве фона для прозрачных блоков
* вынести непрозрачные блоки за пределы прозрачных. Пример:
<!DOCTYPE html>
<html>
<head>
<title>opacity</title>
<style>
.parent {
margin: 1em;
position: relative;
width: 300px; height: 300px;
background: #000;
}
.parent:before{
position: absolute;
content: '';
top: 0; right: 0; bottom: 0; left: 0;
background: #fff;
opacity: 0;
}
.parent:hover:before{
opacity: .5;
}
.child {
margin: 1em;
padding: 0.5em;
position: absolute;
height: 50px;
background: #0f0;
color: #000;
white-space: pre;
}
</style>
</head>
<body>
Наведите мышь на черный блок
<div class="parent">
<div class="child">Травка зеленеет,
Солнышко блестит;
Ласточка с весною
В сени к нам летит.
С нею солнце краше
И весна милей</div>
</div>
</body>
</html>
* если фон — полупрозрачная монотонная заливка можно использовать свойство rgba:
background: rgba(0, 255, 0, 0.5); /*тут зеленый цвет фона с прозрачностью 50%*/
  • 0


Оформление форума – IPBSkins.ru