首頁 > web前端 > html教學 > :解决方案_html/css_WEB-ITnose

:解决方案_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:50:06
原創
1115 人瀏覽過

要求:
做一个”矩形div 块“,并用”长条形背景图.jpg“做其背景,并且该图面积小于”矩形div 块“;
做四个div子块,排成一列,覆盖在”矩形div块“之上,
四个子块的:宽各占25%,半透明,颜色分别为”蓝、绿、黄、紫“
各div块的高度都为height:300px; 宽度需自适应页面大小。


我的方案如下,不太对,请大家给出自己的解决方案并编写出来,谢谢

html文件是 :

 


 
1

 
2

 
3

 
4

 

----------------------------------------------------------------------------
css文件是:
.bottom_top{
width:100%;
height:300px;
background-image:url(“长条形背景图.jpg");
background-size:50%;
z-index:10;
}

.pic{
width:25%;
height:300px;
float:left;
background-image:none;
background-color:orange;
opacity:0.4;
z-index:30;
}


回复讨论(解决方案)

四个div子块 浮动  相对定位 自己计算分长度就行了、

<div class="bottom_top"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> </div><style>.bottom_top{width:100%;height:300px;background-image:url(长条形背景图.jpg);}.bottom_top div{width:25%;height:300px;float:left;opacity:0.4;}.bottom_top .d1{background:blue;}.bottom_top .d2{background:green;}.bottom_top .d3{background:yellow;}.bottom_top .d4{background:violet;}</style>
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板