当前位置: 首页 > 面试题库 >

背景图像上的半透明颜色层?

长孙永思
2023-03-14
问题内容

我有一个DIV,我想放置一个图案作为背景。此图案是灰色的。为了使它更好一点,我想在上面放一个透明的颜色“层”。以下是我尝试过的方法,但是没有用。有没有办法将彩色图层放在背景图像上?

这是我的CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

问题答案:

这里是:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

对此的HTML:

<div class="background">
    <div class="layer">
    </div>
</div>

当然.background,如果其中没有其他元素,则需要为该类定义宽度和高度



 类似资料:
  • 我注意到在具有透明背景的图像上使用CSS颜色变换会产生意想不到的效果。下面是一个示例: 总而言之,问题是这样的。如果将鼠标悬停在image div div的填充上,则此div的背景色和包含的image div以与预期相同的速率执行颜色转换。但是,如果将鼠标悬停在图像div上,其颜色的过渡速度似乎略快于图像div div的颜色。 鉴于我能够在Firefox、Chrome、Safari和Edge上重现

  • 问题内容: 假设我要在CSS中渲染箭头,箭头应具有头部,尾部和灵活的宽度,以便可以包含文本。我当然可以创建多个div来获得所需的内容,但是如何在CSS3中完成呢? 我可以使用多个背景图片: 的HTML: 这给了我一个带有箭头和尾巴的透明中间部分。似乎不可能在中间部分指定颜色。 仅使用一张背景图像,您可以执行以下操作: 我知道这在很多方面都是可行的,但是背景颜色属性是否真的从速记定义中丢失了? 问题

  • 我试图从眼动跟踪结果创建一个热图(显示用户在屏幕上最频繁查看的位置)。 对于用户经常查看的像素,我想设置不透明的红色,对于不太频繁的橙色,等等...我使用红色到绿色的色阶。但是对于频率最低的像素,我希望它们不仅显示绿色,而且是透明的。 问题是,当我尝试改变颜色时,例如使用它实际上并没有根据新旧颜色将像素作为平均值着色,它只是显示一些新的、看起来奇怪的颜色。 图像与alpha RGBA值设置为50:

  • 本文向大家介绍Android编程实现设置按钮背景透明与半透明及图片背景透明的方法,包括了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法。分享给大家供大家参考,具体如下: Button或者ImageButton的背景设为透明或者半透明: 半透明 透明 颜色和不

  • 我尝试将背景透明的tiff格式的图像转换为jpeg,以将其大小调整为200x200或1200x1200,但在转换时,背景变为黑色,我希望在转换后保持背景透明或白色 我的代码如下: 这在java JAI中是如何实现的?

  • 我有一个带有文本块的div元素和一个父div,我在其中设置了一个背景图像。现在我想降低背景图像的不透明度。请建议我怎么做。 提前谢谢。 编辑: 我希望通过编辑 html 内容来改变我的博客文章看待 blogger.com 的方式。html 代码如下所示: 我试图用 div 元素包围上面的整个代码,并分别设置每个 div 的不透明度,如下所示: 但它不起作用。