相关疑难解决方法(0)

我在SO和Web上都看到了很多这个问题.但它们都不是我想要的.

如何仅使用CSS为背景图像添加颜色叠加？

示例HTML:

<div class="testclass">
</div>

CSS示例:

.testclass {
    background-image: url("../img/img.jpg");
}

请注意:

• 我想通过仅使用CSS来解决这个问题.即我不想在div"testclass"中为颜色叠加添加一个子div.

• 这不应该是一个"悬停效果",我只想简单地在背景图像上添加一个颜色过度.

• 我希望能够使用不透明度,即我正在寻找一种允许RGBA颜色的解决方案.

• 我正在寻找一种颜色,让我们说黑色.不是渐变.

这可能吗？(如果没有,我会感到惊讶,但我还没有找到任何关于此的内容),如果是这样,最好的方法是什么呢？

所有的建议和意见都表示赞赏!

如何在不制作新的较暗图像的情况下在悬停时使背景图像变暗？

CSS:

.image {
  background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
  width: 58px;
  height: 58px;
}

JSFiddle链接:http://jsfiddle.net/qrmqM/1/

这个多背景CSS线有什么问题.Firefox 4忽略它(就像语法错误时一样).

background: rgba(255,0,0,0.2), url("static/menubg.jpg");

我在一个 div 中有几张图像，我正在尝试对图像产生影响。基本上，我只是尝试在图像上设置一个不透明度约为 0.7 的前景色，这样我仍然可以看到图像并具有该效果。

现在，我环顾四周，发现了一些非常好的解决方案，例如这个解决方案，但它与我想要实现的方法不同。

这是我的 HTML

<div class="col colMg">
    <div class="prodImg">
        <img src="images/model1.jpg" alt="" title="" />
        <div class="layer"></div>
    </div>

    <div class="prodImg">
        <img src="images/model2.jpg" alt="" title="" />
    </div>
</div>

请注意layer我的 HTML 片段中的类。由于某种原因，它不能与我下面放置的 CSS 一起正常工作。从这里提供的代码来看，它layer覆盖了我的整个页面，包括其父 div 中的图像div. That's now what I want. I want it to cover only the image in its parent 。

这是我的 CSS

#prodIntro{
    margin-top: 10px;
    width: 50%;
    background-color: red;
    display: block;
    display:visible;
}

.col{
    width: 33%;
    float: left;
} …

我使用图像作为我的一个页面的背景.我想在图像上添加一个不透明度的backgroundColor.我不确定如何使用React Native实现这一目标.

render() {
  return (
    <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
      <Text>Hello</Text>
    </Image>
  )
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  width: null,
  height: null,
}

以下是我在网页上实现这一目标的方法:如何在CSS中对图像进行叠加？

我遇到了奇怪的问题（对于我作为 CSS 世界的初学者来说）。我试图在其顶部有一个带有透明颜色的背景图像。图像是主页背景：

body {

font-family: 'Raleway', 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
background: rgba(0,0,0,.3) url('..img/image.jpg') no-repeat;
background-size: cover;

min-height: 100vh; }

这对我不起作用。不知道为什么？

我检查了开发工具，添加了单独的背景颜色，但效果不佳。我试图在这里找到解决方案：Semi-transparent color layer over background-image? 和 treid 提出的解决方案。不适合我。

但是当我添加类并创建此行时：

.body {
background: 
    linear-gradient(
    rgba(0, 0, 0,.5), 
    rgba(0, 0, 0,.5)
),
    url('../img/bg_image.jpg') no-repeat;
background-size: cover; }

有效！但我还是不知道为什么？

是特异性问题吗？也许有什么不同？如果有人可以回答我的问题（以 qucik 为例），我将不胜感激。

所以我自己找到的解决方案是上面的代码，但我不明白之前的尝试对我不起作用。

干杯，卡米尔