search

Home  >  Article  >  Web Front-end  >  菜鸟学习路，遇到了问题请大神帮忙_html/css_WEB-ITnose

菜鸟学习路，遇到了问题请大神帮忙_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:21:07862browse

我就想做出来这种效果，用了opacity:0.5;还是不管用啊


回复讨论(解决方案)

贴下你的代码

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







index




     菜鸟学习路，遇到了问题请大神帮忙_html/css_WEB-ITnose

     

    

    

            
  • 首页

    •             
  • 关于美联

    •             
  • 选车中心

    •             
  • 美联新车

    •             
  • 活动咨询

    •             
  • 买卖流程

    •             
  • 金牌服务

    •             
  • 美联速拍

    •         

       
    




.background{ width:100%;height:60px; background-color:#000;opacity:0.5; margin-top: -60px;}
这里加一个margin-top:-60px;

background为什么要加margin-top：-60px；他的位置正好和index-nav一平的哦 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="x-ua-compatible" content="ie=7" /><meta content="width=device-width,initial-scale=1,minimum-scale=1.0, maximum-scale=1,user-scalable=yes" name="viewport"><link href="../css/index.css" type="text/css" rel="stylesheet" /><style type="text/css">.index-all{ width:100%; font-family:微软雅黑; height:1000px;}.logo{width:100%;}.background{ width:100%;height:60px; background-color:#000;opacity:0.5;}.logo img{ width:100%;}.index-nav{ width:100%; margin:auto; height:60px; position:absolute; margin-top:-60px;}.index-nav ul{ list-style-type:none;  margin:auto;width:60%; line-height:50px;}.index-nav ul li{ float:left; padding-left:3.3%; padding-right:3.3%; color:#FFF;}</style><title>index</title></head><body><div class="index-all"><div class="logo">    	<img  src="../image/logo1.png"/ alt="菜鸟学习路，遇到了问题请大神帮忙_html/css_WEB-ITnose" ></div>     <div class="background"></div>    <div class="index-nav">    	<ul>        	<li>首页</li>            <li>关于美联</li>            <li>选车中心</li>            <li>美联新车</li>            <li>活动咨询</li>            <li>买卖流程</li>            <li>金牌服务</li>            <li>美联速拍</li>        </ul>           </div></div></body></html>


透明度调高点

style中的index-all是什么意思？

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：button 文字换行的问题_html/css_WEB-ITnoseNext article：li和背景图片错位问题_html/css_WEB-ITnose

Related articles

See more