css - 如何为视差图像设置 100% 宽度？

Question

我有一个包含图像的视差类。我试图通过将图像宽度设置为 100% 来使图像响应，但它根本不起作用。

.parallax1 {
  /* The image used */
  background-image: url('Images/FloralPurple.png');
  /* Full height and width */
  height: 100%; 
  width:100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}  

下面是HTML代码:-

<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>

我尝试在我的 div 中添加图像标签，但仍然没有任何改变。

谢谢

Answer 1

背景图像的大小由 background-size css 属性定义。 当设置为 cover 时，图像将缩放以填充 div。您可以将背景大小设置为以下值:

• cover 如前所述，div 被覆盖。图像被缩放和裁剪。
• contain 图像始终完全可见，并进行缩放以使其完全可见。
• 100px 50px 固定尺寸。图像被拉伸(stretch)。
• 50% 100% 百分比。图像被拉伸(stretch)。

例子:

background-size: 100%;

图像将始终填充 div。但要做到这一点，就得筋疲力尽。