CSS-背景图像水平拉伸并垂直重复? [英] CSS - Background image stretch horizontally and repeat vertically?

问题描述

使用background-size: cover，我可以拉伸背景以适合页面的整个宽度.

Using background-size: cover I am able to make the background stretch to fit the full width of the page.

使用repeat-y我可以使背景重复或垂直平铺到页面的整个高度.

Using repeat-y I am able to make the background repeat or tile vertically, to the full height of the page.

有什么办法可以将这两种效果结合起来吗?不幸的是，它们似乎无法协同工作(至少在Chrome中).看来我可以用background-size: cover在两个方向上拉伸，也可以不在x方向上拉伸，而在y方向上重复.

Is there any way to combine these two effects? Unfortunately they don't seem to work together (at least in Chrome). It appears that I can either stretch in both directions with background-size: cover, or not stretch in the x direction but repeat in the y direction.

使用background-size: 100% Npx(其中N是图像的高度)可以完成上述操作，但是由于背景图像仅沿一个方向拉伸，因此它使背景图像倾斜.有没有办法保持它按比例缩放?

Using background-size: 100% Npx (where N is the height of the image) I can accomplish the above, but it skews the background image as it's only stretched in one direction. Is there a way to keep it scaling proportionally?

推荐答案

代替覆盖，使用background-size: 100% auto;将背景图像调整为完整的浏览器宽度，同时保持其高宽比.将此功能与background-repeat: repeat-y;结合使用，可以垂直平铺它.

Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.

这篇关于CSS-背景图像水平拉伸并垂直重复?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！