html背景图片透明度-使 HTML 正文背景图像透明

bendan520 html

2023-08-29 0 2,601 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

我试图使我的背景图像透明，但页面的其余部分不透明html背景图片透明度，例如非褪色和 CSS 之上的褪色背景图像。

我有一个 HTML 页面，使用 div 作为背景图像。以下是该页面的简化版本：


    
        #BACkgroundImage {
            BACkground-image: url('../Documents/images/Sea.jpg');
            BACkground-repeat: no-repeat;
            BACkground-size: 100%;
            opacity: 0.4;
            filter:alpha(opacity=40);
            height:100%;
            width:100%;
            z-index:0.1;
        }
        .main{
            height:500px;
            width:900px;
            margin:auto;
            BACkground-color:green;
            z-index:1;
            opacity: 1;
            filter:alpha(opacity=100);
        }
    


<div id="BACkgroundImage">

我在以下问题中找到了此设置：

如何使网站的背景透明而不使内容（图像和文本）也透明？

它几乎可以工作，不仅整个页面是透明的，而不仅仅是背景图像。

我已经尝试调整“主”div 上的 Z 索引和不透明度html背景图片透明度，但它不起作用。

我认为这是一个简单的修复，但我看不到解决方案。

我也尝试过这个问题，但它并没有真正提供解决方案：

和这个：

我没有足够的声誉来发布我想要实现的目标的图像。

@H_262_26@解决方案

HTML：

<div id="BACkgroundImage">

CSS：

#BACkgroundImage{z-index: 1;}
#BACkgroundImage:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   BACkground-image: url(http://static.tumblr.com/25BAC3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
    BACkground-repeat: no-repeat;
    BACkground-size: 100%;
    opacity: 0.4;
    filter:alpha(opacity=40);
    height:100%;
    width:100%;
 }
.main{
   height:320px;
   width:320px;
   margin:auto;
   BACkground-color:green;
   z-index:-1;
   opacity: 1;
   filter:alpha(opacity=100);
}