在MVC视图中处理背景图像的首选方式

我有一个MVC 4视图，我正在显示一个数据表。此表格呈现在<div>标记内。我想要做的是显示一个div文件内容位于其上的背景图片。图像应该包含大部分或全部的div，并且有点微弱和微妙。换句话说，它不应该脱颖而出。它应该几乎看起来像一个水印。我没有很多MVC和HTML/CSS的经验，我不知道如何做到这一点。在MVC视图中处理背景图像的首选方式

我不确定我应该使用什么样的图像（PNG，JPG？），或者它甚至很重要，以及如何使它透明到足以使它看起来微妙等。我假设CSS可以处理很多这对我来说，只是不知道从哪里开始。

来源

2013-03-13 Randy Minder

哦，这很容易。给DIV一个类，如：

<div class="table-wrapper">

在CSS文件的末尾被你的页面上使用，如果他们是一个，写CSS是这样的：

.table-wrapper{ 
    background-image: url(/path/to/image); 
    /* if the image repeats nicely, tile it, using background-repeat */ 
    background-repeat: repeat; /* repeat-x, repeat-y and no-repeat are options */ 
    /* alternatively, you could stretch it to fit the div, using background-size */ 
    background-size: 100% 100%; 

}

你不应该看只要不使用透明度，png或jpg之间的大小差别很大。具有透明度的.png可以很快获得文件大小。

我建议选择一个与周围区域的颜色非常接近的图像。通过这种方式，您可以给出低对比度或半透明图像的印象，而无需文件大小的成本。

来源

2013-03-13 12:20:03 daveyfaherty

是的，这很容易。如果我将不透明度设置为使其更加微妙（透视）外观（我还没有机会实现您的解决方案），会有帮助吗？ – 2013-03-13 14:27:28

在MVC视图中处理背景图像的首选方式

回答

相关问题