Question

我要遵循以下HTML结构。

 <a class="abc" style: {background:"blue"}">
        <img  src="ImgPath" />
    </a>

CSS

.abc{
    width: 177px;
    height: 177px;
    display:inline-block;
}
abc img {
    display:block;
    z-index:9999;
    width:50px;
    height:50px
}

我想在背景颜色的顶部显示透明图像。我不应该使用background-image / background：＃c1c1c1 url（'img.png'）no-repeat; css属性。我不想使用图像作为背景图像。图像隐藏了背景颜色。

任何帮助？

Answer 1

图片可能没有显示，因为您有未公开的引号：

<a class="abc" style: {background:"blue"}">

你应该：

<a class="abc" style="background:blue">

最好使用CSS

.abc {
    background: url("ImgPath") 0 0 no-repeat blue;
}

Answer 2

您可以为元素指定背景颜色并设置如下背景图像：

CSS

.abc{ 
background: #c1c1c1 url('path/img.jpg') no-repeat;
}

HTML

<a class="abc"></a>

这样就不会隐藏颜色。

Answer 3

你是否正在寻找这种效果？

不确定你是不是在寻找这种东西。检查演示链接。 http://jsbin.com/wibaxuyu/1/

a.abc{
  width:200px;
  height:200px;
  background:rgba(145 ,145 ,89 ,00.5);
  display:inline-block;
  position:relative;
}
a img{
  position:absolute;
  top:20%;
  left:20%;
    z-index:9999;
    width:100px;
    height:100px;
   opacity: 0.8;
   filter: alpha(opacity=80); /* IE 5-7 */
  -moz-opacity: 0.8;
}

<a class="abc">
  <img src="http://lorempixel.com/100/100" />
</a>

CSS渲染图像顶部的背景颜色

3 个答案: