使用CSS裁剪背景图像

Question

5

我在body标签上设置了一个背景图片，大约有500像素高。这对于主页来说还可以，但是在其他页面上看起来不太好。我想在其他页面上将背景图片剪裁到大约300像素高，但仍然使用在body标签中的背景图片。

只用CSS是否能实现这个功能？

- jcrowson

你可以为首页使用自定义 CSS 吗？ - Dzung Nguyen

2

我建议您查看关于这个主题的先前讨论：https://dev59.com/a3RC5IYBdhLWcg3wOOL1。 - Sreenath Nannat

3个回答

2

背景尺寸是CSS3中的一个属性，用于控制元素背景图片的尺寸。可以使用特定的值或百分比来设置背景图片的大小，也可以使用cover或contain来自适应元素。这使得在不同设备上显示相同背景图片成为可能，同时也提高了网站的响应性。

- Alistair Laing

19

这是缩放，而不是裁剪。 - usr

0

或许像background-origin和background-clip这样的属性也可以帮助你。

- Santana6.35

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Max Oriola · Accepted Answer

将背景图片高度设为300像素，不裁剪，但进行缩放：

background-size: auto 300px;

但是您不能将裁剪区域缩小到背景设置的标签以下。您需要在内部编写一个具有所需高度的标签，并在那里设置背景，然后再进行裁剪。

 background-size: cover;