使HTML正文背景图像透明

发布时间：2020-12-14 23:26:20 所属栏目：资源来源：网络整理

导读：我试图使我的背景图像透明,并且页面的其余部分不透明,例如在非褪色 HTML和CSS之上的褪色背景图像. 我有一个HTML页面,使用div作为背景图像.以下是该页面的简化版本： HTMLhead style type="text/css" #backgroundImage { background-image: url('../Documents

我试图使我的背景图像透明,并且页面的其余部分不透明,例如在非褪色 HTML和CSS之上的褪色背景图像.

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

<HTML>

<head>

    <style type="text/css">
        #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);

        }
    </style>


</head>


<body>

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

</body>

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

How can I make my website’s background transparent without making the content (images & text) transparent too?

它几乎可以工作,除了整个页面是透明的,而不仅仅是背景图像.

我已经尝试调整’main’div上的Z-index和opacity,但它不起作用.

我觉得这是一个简单的修复,但我无法看到解决方案.

我也试过这个问题,但它似乎没有提供解决方案：

How do i make my background image transparent in CSS if I have the following code?

还有这个：

CSS background-image-opacity?

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

解决方法

HTML：

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

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);
}

JSFIDDLE DEMO

网站参考：http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!