首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >背景图像上的半透明彩色层?

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

Stack Overflow用户
提问于 2012-02-08 03:59:10
回答 13查看 550.1K关注 0票数 254

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

这是我的CSS:

代码语言:javascript
复制
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
EN

回答 13

Stack Overflow用户

回答已采纳

发布于 2012-02-08 04:04:08

这就是它:

代码语言:javascript
复制
.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:

代码语言:javascript
复制
<div class="background">
    <div class="layer">
    </div>
</div>

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

票数 266
EN

Stack Overflow用户

发布于 2014-06-06 22:48:50

我知道这是一个非常老的帖子,但它在Google中显示在顶部,所以这里有另一个选择。

这是一个纯CSS,不需要任何额外的HTML。

代码语言:javascript
复制
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

长方体阴影功能有许多令人惊讶的用途。

票数 380
EN

Stack Overflow用户

发布于 2014-09-13 05:07:32

来自CSS-Tricks...有一个简单的方法可以做到这一点,不需要z索引和添加伪元素--需要线性梯度,我认为这意味着你需要CSS3支持

代码语言:javascript
复制
.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}
票数 174
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9182978

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档