Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > ：解决方案_html/css_WEB-ITnose

：解决方案_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:50:06
Original
1115 Leute haben es durchsucht

要求：
做一个”矩形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>
Nach dem Login kopieren

Verwandte Etiketten：
：解决方案
Quelle：php.cn
Vorheriger Artikel：求解DIV如何实现长横线？及其他_html/css_WEB-ITnose Nächster Artikel：css相关,鼠标点击<input>输入域后出现有颜色的边框_html/css_WEB-ITnose
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Verschieben Sie den Inhalt nach links, indem Sie die Eigenschaft „Width' hinzufügen Ich habe dem Körper Ränder gegeben. main {linker Rand: 200px; rechter Rand: 200px; Textaus...
Aus 2024-04-06 22:01:35
0
3
816
So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, w...
Aus 2024-04-06 20:22:15
0
1
454
Berechnen Sie die Summe der Felder in einer anderen Tabelle mithilfe einer MySQL-SQL-Abfrage Ich habe ein Schema wie dieses: Benutzertabelle mit den Attributen „user_id“ und „username...
Aus 2024-04-06 19:39:29
0
1
441
So erhalten Sie den Vornamen aus der Spalte „customer_name'. selectsubstring(custommer_name,1,instr(custmer_name,''))asfirst_namefromsales.customers; d...
Aus 2024-04-06 17:43:30
0
2
433
Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...
Aus 2024-04-06 17:46:54
0
1
355
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage