Размещение изображения над таблицей в верхней части бюллетеня

Я разработал шаблон бюллетеня , и есть деталь, которую я хотел бы добавить. Как разделитель между двумя таблицами/блоками контента, я хотел бы добавить стрелку, указывающую на приближающуюся таблицу. Я добавил границу с цветом в таблицу, и в центре мне бы хотелось, чтобы стрелка (изображение) нарушала границу, но я могу получить изображение, чтобы выровнять его сверху, а не перекрывать его, что и есть Я в идеале хотел бы это сделать.Размещение изображения над таблицей в верхней части бюллетеня

Таблицы имеют разные цвета фона, которые охватывают весь видовой экран, разделитель должен делать то же самое. Макет также реагирует.

Вот код, который я использовал. Является ли то, что я прошу даже в информационном бюллетене с точки зрения ограничений и совместимости?

Вот мой результат: http://jsfiddle.net/qyzq4bvb/

Это то, что я пытаюсь сделать:

enter image description here

<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider"> 
<tr> 
    <td align="center" valign="top"> 
    <img src="http://img.jpg" alt="arrow" width="49" height="24" /> 
    </td> 
</tr> 
</table> 

#divider{border-top:3px solid; border-color:#63A700; width:100%; background-color:inherit;}

источник

2015-03-11 Mats Larsen

Можете ли вы сделать jsfiddle? http://jsfiddle.net/ – dowomenfart

вместе со скрипкой можно сделать быстрое изображение макета (не обязательно должно быть совершенным) конечного конечного результата, который вы ищете, и разместите его здесь, чтобы мы знали, что именно вы хотите и где вы хотите стрелку и т. д. спасибо – Sai

Вы можете попробовать использовать position: relative на вашем img, как показано ниже.

Возможно, вам потребуется внести небольшие корректировки в изображение, чтобы очистить левый/правый края для более бесшовного наложения. Файл .png может работать лучше, так как цвет .jpg не совсем прав (сжатие?). Однако идея будет работать.

Возможно, вам нужно будет добавить к изображению верхнюю границу белого цвета. Имейте в виду, что такой тип позиционирования пикселей может быть чувствительным к кросс-браузерным эффектам.

#divider { 
 
    border-top: 3px solid; 
 
    border-color: #63A700; 
 
    width: 100%; 
 
    background-color: inherit; 
 
} 
 
#divider td { 
 
    text-align: center; 
 
} 
 
#divider td img { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: -4px; 
 
    border-top: 1px solid white; 
 
}

<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider"> 
 
    <tr> 
 
    <td> 
 
     <img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/arrow.jpg" alt="arrow" width="49" height="24" /> 
 
    </td> 
 
    </tr> 
 
</table>

источник

2015-03-11 13:12:37

Размещение изображения над таблицей в верхней части бюллетеня

ответ

Смежные вопросы