css фоновые изображения

Question

Привет, у меня есть 1px png файл, который я пытаюсь установить в качестве фонового изображения для двух элементов div, которые расположены рядом друг с другом по горизонтали. Html и css указаны ниже: -

<div id='one'>hi</div>
<div id='two'>hello</div>

CSS выглядит следующим образом:

div {
    width: 50%;
    height: 50%
}
#one, #two {
    background-image: url(/images/image.png);
    background-repeat: repeat;
}

Теперь проблема заключается в том, что между двумя делителями автоматически появляется черная рамка, когда изображение установлено.Я не хочу, чтобы два div были рассмотрены как отдельные блоки. Пожалуйста, помогите.Я совершенно новичок в css и нуждаюсь в помощи: -)!

Answer 1

Я хотел бы поспорить, что изображение, которое вы используете, имеет альфа-прозрачность (то есть изображение частично прозрачно), и то, что вы видите, - это однопиксельное перекрытие между двумя элементами div. Либо убедитесь, что контейнер имеет четное число пикселей в ширину, либо поместите div в другой контейнер и используйте вместо этого фон.

Answer 2

Проблема вызвана парой взаимодействующих вещей.

Сначала убедитесь, что вы используете строгий HTML-тип документа.Это поможет смягчить многие проблемы форматирования между браузерами вокруг div.См. alistapart для описания и списка реальных используемых типов документов и quirksmode для подробного сравнения их.

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

Кроме того, вы можете захотеть взять firebug для firefox и использовать инструменты разработки chromes.firebug фактически покажет вам, на что настроены все поля / отступы / все остальное.Инструменты Chrome не дают вам красивой картины с деталями, но вы можете увидеть, что поля / padding / и т.д. находятся в разделе Computed Style.

Answer 3

как роберт, я тоже не получаю границы, но я получаю некоторые повторения посмотрите, работает ли это для вас:

#one, #two{
    background-image:url(99785.jpg);
    background-repeat: no-repeat;
    borders: 0
    }