Home > Article > Web Front-end > 灰色背景上显示白色文字_html/css_WEB-ITnose

灰色背景上显示白色文字_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:19:162314browse

 <a href="http://www.dianping.com/" target="_Blank">                    <div class="big news-thumb" data-page="random-page">                        <span class="icon-font" aria-hidden="true" style="width: 100%; text-align: center; margin-top: 50px">大众点评</span>                    </div>                </a>

我给外面的div设置了透明和灰色背景，里面span里面的文字设置白色还是会被DIV背景色影响看不清怎么办
这是DIV样式
.big{
  width:100%;
  height:200px;
   /*background: url(images/2.jpg) 0 0 repeat;*/
    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

这是 span样式
.icon-font{
  font-size:1.2em;
  line-height:1.6 !important;
  color:#FFFFFF;
}

回复讨论(解决方案)

没看到有使用灰色背景...

有的忘记贴出来啦
.news-thumb {background:#C8C9CA;}
.news-thumb:hover:hover {color:white;opacity:1;}

没看到有使用灰色背景...

上面的文字想要白色的被底色影响啦。

是透明影响的,不是背景影响

没看到有使用灰色背景...

上面的文字想要白色的被底色影响啦。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><style>    .left{        width:19.5%;    }    .right{        width:80.2%;    }    .main{        height:200px;        opacity: 0.7;        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);        background-color: lightgray;        line-height: 200px;        float: left;        text-align: center;        border: 1px white solid;        pading:2px;        color:white;    }    .main:hover{        opacity: 1;    }</style><body><a href="http://www.dianping.com/" target="_Blank">    <div class="left main" data-page="random-page">        微信电脑版    </div></a><a href="http://www.dianping.com/" target="_Blank">    <div class="right main" data-page="random-page">        大众点评    </div></a></body></html>

是透明影响的,不是背景影响

是透明影响的，不是背景

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS定位问题（3）：相对定位，绝对定位_html/css_WEB-ITnoseNext article：【译】谨慎使用CSS中的波浪选择器_html/css_WEB-ITnose

See more

灰色背景上显示白色文字_html/css_WEB-ITnose

回复讨论(解决方案)

Related articles