Question

我正在尝试在联系表单上的textarea中添加背景图像。问题是，只要浏览器调整大小，图像就会被切断，这意味着它不能完全适合textarea框。我希望textarea显示整个图像并通过调整浏览器大小来调整大小。不确定是否有解决方案。

这是我的代码

#contactfooter {
    background-color: rgba(76, 73, 73, 0.44);
    color: rgb(183, 181, 181);
    border: 1px solid #676363;
    padding: 5px;
    width: 100%;
}

textarea#contactfooter {
background-color: rgba(76, 73, 73, 0.44);
background: url(https://psycheseminars.com/wp-content/uploads/2016/08/textback.jpg);
}

这是https://psycheseminars.com/downloads/spirit-salt-lake-city/页面联系表单位于页脚中。

Answer 1

您可以通过设置要包含的textarea的background-size属性来显示整个图像，但是由于它的尺寸，图像将不会覆盖整个背景，其余的空间将会除非将background-repeat设置为no-repeat，否则请填写重复项。但是，我认为在这种情况下重复会更加可取...无论如何你可以自己玩它但是要回答你如何让整个图像显示的具体问题只需将textarea的css更改为：

textarea#contactfooter {
    background-color: rgba(76, 73, 73, 0.44);
    background: url(https://psycheseminars.com/wp-content/uploads/2016/08/textback.jpg);
    background-size: contain;
}

此外，您还可以将背景位置设置为居中，将背景重复设置为无重复，以便只保留一个图像居中，但这又取决于您希望它的外观：

textarea#contactfooter {
    background-color: rgba(76, 73, 73, 0.44);
    background: url(https://psycheseminars.com/wp-content/uploads/2016/08/textback.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Answer 2

请试试下面的代码。

textarea#contactfooter {
   background-size: cover;
   background-position: 50%;
}

在联络形式7 textarea里面的背景图象

2 个答案: