首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用CSS对背景图像进行着色?

如何使用CSS对背景图像进行着色?
EN

Stack Overflow用户
提问于 2012-08-24 23:53:28
回答 4查看 99.2K关注 0票数 53

我有一个通过CSS设置的背景图像。

代码语言:javascript
复制
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

我计划为网站的不同页面提供不同的背景图片:所以在它上面的文字清晰是很重要的。现在,为了确保易读性,我在中间的#main内容框中有一个半透明的黑色背景:

代码语言:javascript
复制
#main {
background: rgba(0, 0, 0, 0.5);
}

然而,我真正想做的是在整个背景图像上有一个半透明的背景,因为黑盒看起来有点笨重。我试过制作一个包含整个HTML文档的<div id=#tint>,并将rgba(0,0,0,0.5)设置为#tint,但这根本不起作用--我要么什么都不做更改,要么将整个背景变成一个简单的灰色,根本看不到背景图像。这是不可能的吗?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-08-25 00:32:02

我认为你需要创建一个覆盖元素(可能是div),它具有所寻找的半透明背景。类似于:

代码语言:javascript
复制
.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

当然,还有一个小演示:little link

票数 24
EN

Stack Overflow用户

发布于 2015-09-22 03:33:27

这对我来说很有效:

https://css-tricks.com/tinted-images-multiple-backgrounds/

代码语言:javascript
复制
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

在另一个答案的基础上,你可以用现有的颜色来做到这一点,如下所示:

代码语言:javascript
复制
linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),
票数 7
EN

Stack Overflow用户

发布于 2012-08-25 00:19:18

它将是overlay属性https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay,但它是一个草案。不要依赖它

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12112746

复制
相关文章

相似问题

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