Question

下午好。

我对网站开发还很陌生，所以如果我问的问题很简单，我会道歉，但我无法找到可行的答案。

目标

我要做的就是让一个带有拉伸背景图像的fieldset，因此如果我改变了fieldset的大小，图像也应该相应地改变。

我目前拥有什么

<form action="" style="width: 400px;height: 200px;display:inline-block;">
<fieldset style="background:url(/MusicPlayerBackground.png) no-repeat;width:1000px;height: 2000px;">
<legend align="center">Playlist:</legend>


</fieldset>
</form>

是否应该在fieldset的样式部分中添加某些内容？

我在下面尝试了这个，正如另一个论坛所建议的那样：

background: url(background: url(/MusicPlayerBackground.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;

但是这会产生一个空白字段集。

任何帮助都将不胜感激。

提前致谢。

Answer 1

如果您删除第二个background:url，则会显示背景。

Fiddle

Answer 2

您需要使用100% 100%。

而不是封面

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;

Fiddle

此外，如果您要通过放置使用background-image:的内联样式来更改图像，请确保您要覆盖css文件中设置的所有背景属性。

Answer 3

您的宽度和高度的值必须为 100% 而不是 1000px

HTML - fieldset - 拉伸背景图像

3 个答案: