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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 372 3 темы, 22 сообщения, 8 баллов репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография bor10811
    #10

    bor10811
    Очков активности: 15 2 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 19.08.2018
Топ 5 участников по репутации


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

#31 lordamid

lordamid
    Topic Starter
  • Неактивные
  • 13 сообщений
  • Репутация: 0
1

Отправлено 25 April 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
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 26 April 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