Short answer: The picture is pinned to the browser window with background-attachment: fixed, so the opaque header covers its top and the white article cards cover its middle. The page shows a strip under the bar and the two side margins. Compose that strip in 石青 (azurite), 石綠 (malachite), and gold line, the mineral set of a 青綠金碧 gongbi painting, matched to the header’s CSS rather than to a photograph or one named scroll. Halls sit on the left and the right. The center is quiet water. An image generator draws the file from that written layout.
What the page actually shows
The background is background-size: cover, anchored at center, and fixed to the window. Scroll the posts and the picture stays put. The header is an opaque bar, so it covers the top of the file. The articles are white cards across the middle.
On a wide screen the picture that remains is the band between the header and the cards, plus a narrow margin at each side. A hall painted in the middle of the file sits behind a card. A sky painted only at the top of a tall scroll sits behind the header. The useful region is the upper band of a wide frame.
What the picture can and cannot carry
The bar has already chosen the pigments. A horizontal gradient runs from #163e62 at the edges to #1a6a56 in the middle. The site name is #f6e2a8. A gold line, rgba(232, 196, 106, 0.8), sits on the bottom edge of the bar. Those three colors are the azurite, the malachite, and the gold of a 金碧 painting.
The picture can use those pigments and nothing else that fights them. Mountains are flat mineral blue and green. Gold is a line. The top of the file stays close to #163e62, so the bottom of the header and the sky under it are one surface.
It cannot carry a building inside the bar. The bar is a few dozen pixels tall. A roof drawn there reads as a curve. The building belongs in the background, where a whole slope is visible. The bar can keep a hollow key-fret (回紋) in the side margins, in gold, clear of the title.
Where the colors and the drawing come from
Nothing in the file is sampled from a photograph, and nothing is traced from one named painting. The brief names two references.
The first is the header already on the page. Those three CSS colors are the whole palette. In architectural color that set is 金碧: 石青, 石綠, and gold line (泥金). The sky is told to stay close to #163e62 across the top fifth of the frame, so the part the bar covers and the part that shows are the same pigment.
The second is the painting convention those mineral names belong to. 青綠 is the blue-green landscape built from azurite and malachite. 工筆 (gongbi) is the manner: flat areas of mineral color, fine outlines, spacious and still, the kind associated with Song-dynasty 青綠. Adding gold line to that pair is what makes it 青綠金碧. The brief names that convention. It does not attach a museum image, a scan, or a style model. It also names what the convention rules out on this page: a pastel sunrise, a peach or pink sky, heavy white mist, photorealism, and any text, seal, watermark, or figure.
The file is not drawn tile by tile. The layout is written down, and an image generator draws a 16:9 frame, 1280 by 720, from that text:
- The upper band is a deep azurite sky, with a few long clouds edged in thin gold.
- On the far left and the far right, large halls stand beside the water. Eaves turn up. Walls are malachite, in shadow. Gold roof ridges rise into the sky band, so the roofs enter the strip under the header.
- The center stays quieter: layered distant mountains in flat mineral blue and green, then a wide deep blue-green river with a few thin gold ripples.
- Gold is only a fine line, on roof ridges, cloud rims, and the water.
The roofs in the returned file carry more gold than a hairline. They still read as ridges, and they sit at the sides, away from the gold type in the bar, so the file was kept.
The working layout
- Match the sky to the header’s edge color, so the seam disappears.
- Put one hall on the far left and one on the far right, roofs high enough to enter the strip under the bar.
- Keep the center as distant mountains and a wide river. That is where the cards sit.
- Leave
background-positionatcenter. A symmetrical picture does not need a gutter crop. - Keep the white wash light, about 12% at the top and 20% at the bottom. The cards are already white.
Approaches that look simpler and fail
| Approach | Why it fails if the header is opaque and the cards cover the center |
|---|---|
| A pale sunrise under a mineral header | Peach and mist do not meet azurite; the bar looks pasted on |
| A roof or tile drawing inside the header | At the height of the bar the building collapses into a curve or a cloud |
background-position shifted so one hall sits in a gutter |
One side is framed and the other leaves the window |
| A heavy white wash, near 40% to 50% | Mineral blue-green goes gray and the seam under the header opens again |
A translucent header, or a page with no center cards, is where a centered painting belongs. It is the wrong tool once the bar is solid and the articles cover the middle.
When you can drop this layout
You can paint the middle of the file, and ignore the header’s pigments, if you give up one of the constraints:
- The header lets the picture through, so the top of the file is visible
- The center of the page is not covered by cards
- The background scrolls with the document, so the composition is a page rather than a window
Those are layout changes, not a different crop of the same file. Until one of them is true, keep the halls in the margins and the sky in the header’s color.
Why this stays published
We hit this fitting a 金碧 header over a blog background fixed to the window, and the same crop shows up on any page that paints the viewport and then covers it. An opaque header and centered cards leave a strip and two margins. Compose the landscape for that region, in the header’s pigments.
本文由 HoHo 與 AI 協作整理，最後更新於 2026 年 10 月 5 日。