时间戳

首页 > 解决方案 > 降低叠加图像的不透明度

html - 降低叠加图像的不透明度

问题描述

我一直在为网页使用“大图片”模板。overlay.png 确实使我的背景更亮，因为它是覆盖 intro.jpg 的部分透明的蓝色图形。我尝试更改 css.main 文件中的不透明度和渐变/RGBA，以便我的介绍图像不会变暗。尝试没有成功。有什么想法吗？

我的 css.main 脚本：

/* Intro */

    #intro {
        background: url("images/overlay.png"), url("../../images/intro.jpg");
        background-size: 256px 256px, cover;
        background-attachment: fixed, fixed;
        background-position: top left, bottom center;
        background-repeat: repeat, no-repeat;
    }

/* One */

    #one {
        background: url("images/overlay.png"), url("../../images/one.jpg");
        background-size: 256px 256px, cover;
        background-attachment: fixed, fixed;
        background-position: top left, center center;
    }

/* Two */

    #two {
        background: url("images/overlay.png"), url("../../images/two.jpg");
        background-size: 256px 256px, cover;
        background-attachment: fixed, fixed;
        background-position: top left, center center;
    }

请找到叠加图像。提前致谢！

标签： htmlcsstemplatesxhtml

解决方案

你为什么不删除整个覆盖图像和设置并像这样管理它：

#intro{
  background: url(../../images/intro.jpg);
  background-size: cover;
  background-attachment: fixed, fixed;
  background-position: top left, bottom center;
  background-repeat: no-repeat;
  opacity: 0.8;
}

所以你只是直接在设置中管理它opacity？

推荐阅读