css 多张图片组合成一张图片
首先需要引入bootstrap.min.css 和 jQuery.min.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title></title> 7 <link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css"/> 8 <style type="text/css"> 9 .Composite>div{ 10 position: relative; 11 } 12 .Composite>div>div{ 13 width: 100%; 14 height: 100%; 15 position: absolute; 16 z-index: 2; 17 top: 0; 18 text-align: center; 19 background-color: rgb(0 0 0 / 62%); 20 } 21 .Composite>div>div::after{ 22 content: ""; 23 display: inline-block; 24 height: 95%; 25 position: absolute; 26 right: 0; 27 border-right: 1px solid #fff; 28 } 29 .Composite>div:last-child>div::after{ 30 border-right: 0; 31 } 32 .CompositeText{ 33 padding: 0 16px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="d-flex Composite"> 39 <div> 40 <img src="img/bicycle1.png"/> 41 <div class="d-flex justify-content-center align-items-center"> 42 <div class=""> 43 <h2 style="color:#fff">1-这里是标题</h2> 44 <img class="CompositeImg" onclick="shows(this)" src="img/add.svg"/> 45 <p class="CompositeText" onclick="hiddens(this)" style="color:#fff;display: none;"> 46 1-文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方 47 </p> 48 </div> 49 </div> 50 </div> 51 <div> 52 <img src="img/bicycle2.png"/> 53 <div class="d-flex justify-content-center align-items-center"> 54 <div class=""> 55 <h2 style="color:#fff">2-这里是标题</h2> 56 <img class="CompositeImg" onclick="shows(this)" src="img/add.svg"/> 57 <p class="CompositeText" onclick="hiddens(this)" style="color:#fff;display: none;"> 58 2-文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方 59 </p> 60 </div> 61 </div> 62 </div> 63 <div> 64 <img src="img/bicycle3.png"/> 65 <div class="d-flex justify-content-center align-items-center"> 66 <div class=""> 67 <h2 style="color:#fff">3-这里是标题</h2> 68 <img class="CompositeImg" onclick="shows(this)" src="img/add.svg"/> 69 <p class="CompositeText" onclick="hiddens(this)" style="color:#fff;display: none;"> 70 3-文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方 71 </p> 72 </div> 73 </div> 74 </div> 75 <div> 76 <img src="img/bicycle4.png"/> 77 <div class="d-flex justify-content-center align-items-center"> 78 <div class=""> 79 <h2 style="color:#fff">4-这里是标题</h2> 80 <img class="CompositeImg" onclick="shows(this)" src="img/add.svg"/> 81 <p class="CompositeText" onclick="hiddens(this)" style="color:#fff;display: none;"> 82 4-文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方文字浮动在图片上方 83 </p> 84 </div> 85 </div> 86 </div> 87 </div> 88 89 <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 90 <script type="text/javascript"> 91 function shows(that){ 92 $(that).hide(); 93 $(that).next(".CompositeText").slideDown(200); 94 } 95 function hiddens(that){ 96 $(that).hide(); 97 $(that).prev(".CompositeImg").show(); 98 } 99 </script> 100 </body> 101 </html>
注意：图片是一种大图切成4张小图
效果图预览：
