Форум Сайтостроение Веб-строительство

Картинка с наложением текста - как?

BD
На сайте с 27.12.2007
Offline
152
B_D
816

Прошу поделиться техникой реализации такой экстремально модной фишки как картинка с наложением текста на полупрозрачном фоне. Пример - http://lady.marketgid.com/ ("Последние новости"), ну и на каждом первом женском (и не только) сайте сейчас есть что-то подобное.

Гугл выдает советы общего характера, которые, возможно, помогут тем, кто кое-что понимает в верстке - а для начинающих они непонятны). Буду благодарен за код "для чайников" (т.е. полный кусок - css+html). Заранее спасибо!

AlexVenga
На сайте с 10.04.2007
Offline
190
AlexVenga
#1

Дайте код на который нало наложить

Антикризисное предложение: [Бурж, AdSense] [NEW] Сайты - каталоги компаний с гарантией трафа [Дорого] (/ru/forum/1006462)
maldivec
На сайте с 04.11.2008
Offline
160
maldivec
#2

Почему бы вам не открыть исходный код этого самого http://lady.marketgid.com/ (лучше другого подобного, потому что на этом гемор с табличной версткой) и не посмотреть реализацию? Чем это будет отличатся от того, что вам здесь напишут?

maldivec добавил 03.04.2011 в 12:22

AlexVenga:
Дайте код на который нало наложить

Не надо ложить на код :)

Амнистия Яндекса по поведенческим стоимость продвижения по трафику Вопрос по коду пхп
Sano000
На сайте с 12.04.2009
Offline
54
Sano000
#3

Сперто с того сайта. Остальное не существенно, таблицы лучше действительно переделать. Фрагмент кода ниже - это наложение текста на фото как на примере.

CSS

.hit { 
height: 170px; 
width: 170px; 
} 
.hit a img 
{
width:170px !important;
height:170px !important;
} 
.opacityp {
opacity: 0.7; 
top: -45px; 
width: 151px; 
height: 45px;
background-color:#fff;
position:relative;
padding:0 10px;
} 
.opacityp a.title {
font: 700 11px Tahoma,Verdana,Arial !important;
color:#000;text-decoration:none;
}

Хтмл код

<div class="hit"> 
  <a target="_blank" href="http://site/pnews/101309/i/3085/pp/4/2/">
    <img src="http://site/101/101309_vb.jpg" height="200" width="200" border="0">
  </a> 
  <div class="opacityp"> 
    <a class="title" target="_blank" href="http://site/pnews/101309/i/3085/pp/4/2/">Лев Лещенко потерял сыновей - близнецов
    </a> 
  </div> 
</div>
Программирование было хобби - стало серьезной работой
BD
На сайте с 27.12.2007
Offline
152
B_D
#4

Спасибо! Я просто исходный код страницы умею смотреть, а стили еще не научился))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий