CSS: Как перекрывать повторяющиеся фрагменты фона HTML?

Question

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

Answer 1

Элемент теперь может иметь несколько фоновых изображений в CSS3:

http://www.css3.info/preview/multiple-backgrounds/

Это работает не во всех браузерах, но в большинстве новых.

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

    +----------------------++---------------------+
    |                      ||                     |
    |                      ||                     |
    +----------------------++---------------------+

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

                            +----------+
                            |Copy this |
    +----------------------+|----------|----------+
    |                      ||          |          |
    |                      ||          |          |
    +----------------------+|----------|----------+
                            |          |
                            +----------+

И переместите его обратно к левой стороне первого изображения:

    +-----------+
    |paste here |
    |-----------|----------++---------------------+
    |           |          ||                     |
    |           |          ||                     |
    |-----------|----------++---------------------+
    |           |
    +-----------+

Затем удалите правую половину, которую вы продублировали, и теперь у вас останется правильное горизонтальное мозаичное фоновое изображение.