不使用两个 div 的 div 中心的背景图像不透明度

【问题标题】：background image opacity at the center of div without using two divs不使用两个 div 的 div 中心的背景图像不透明度
【发布时间】：2013-02-10 07:57:44
【问题描述】：

我想在 div 的中心有一个背景图片（宽度是固定的，但高度取决于内容，所以我不知道高度。）

图片是登录系统的大学的标志。所以它的宽度和高度也因大学而异。

如何在没有两个 div 的情况下将徽标放在 div 的中心作为水印？有可能吗？

谢谢克

【问题讨论】：

抱歉，我将这部分作为背景图像隔开。你可以使用背景尺寸吗？ IE8 及以下不支持它。你需要一个 javascript 后备。

标签： css opacity

【解决方案1】：

CSS

#test {
    background-image: url(path/to/image.jpg);
    background-size: 50% auto;
    background-position: center center;
    background-repeat: no-repeat;

}

这应该将图像放置在其父元素的中心，宽度将是您设置的任何百分比。该图像将是背景图像。我相信 IE8 及以下将无法按您的意愿显示。您将需要更改图像，因为我认为您无法通过 CSS 调整背景图像的不透明度。所以让图像半透明。

这是一个小提琴：http://jsfiddle.net/MWvCA/

另一种选择是向 div 添加一个绝对定位的 img，使其居中，并通过 CSS 调整不透明度，但如果我是你，我只会调整图像。

【讨论】：