时间戳

首页 > 解决方案 > 设置 div 背景图像不透明度

css - 设置 div 背景图像不透明度

问题描述

我试图设置作为 div 的背景图像的图像的不透明度。当我使用 opacity=0.5 时，它会显示“CSS 不知道不透明度”。

    <div style="background-image:url('../Images/MainBackground.jpg'); 
        opacity=0.5" class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>

然后我将站点管理员页面中的代码更改为单独的 css 文件，如下所示。

.main
{
     background-image: url('../Images/MainBackground.jpg');    
     height: 100%;
     opacity=0.5;
     padding: 0px 12px;
     margin: 12px 8px 8px 8px;
     min-height: 420px;   
}

这里还说css不知道不透明度。

我想将 div 的背景图像的不透明度设置为 0.5。有什么帮助吗？

我正在使用 VS 2010 (C# 4.0)

标签： css

解决方案

尽管另一个答案在技术上是正确的，但在您的情况下，您希望背景的不透明度而不是整个.main容器。您不能在不影响页面子元素的情况下设置背景图像不透明度。如果您有白色背景，则可以创建一个宽度和高度为 100% 的子元素，其中包含将包含数据的不透明白色背景。

<div class="main">
    <div class="opaque">
        // your content here
    </div>
</div>

以及具有 rgba 颜色“白色”和 0.5 不透明度的样式

<style>
    .main {
        background-image: url('../Images/MainBackground.jpg')
    }

    .opaque {
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.5)
    }
</style>

推荐阅读