Heim >Web-Frontend >HTML-Tutorial >灰色背景上显示白色文字_html/css_WEB-ITnose
灰色背景上显示白色文字_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:19:162342Durchsuche
<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> 是透明影响的,不是背景影响
是透明影响的，不是背景
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS定位问题（3）：相对定位，绝对定位_html/css_WEB-ITnoseNächster Artikel：【译】谨慎使用CSS中的波浪选择器_html/css_WEB-ITnose