在页面上放置图像（HTML）
[英]Positioning images on a page (HTML)
问题描述
这些图像使用CSS代码进行悬停效果，除我不知道如何重新排列它们在页面上的位置以外，其他所有功能均正常。
现在它们在水平方向上彼此重叠，我如何使其并排？：
body { color:#000000; background-color:#000000; background-image:url('Background Image'); background-repeat:no-repeat; } a { color:#0000FF; } a:visited { color:#800080; } a:hover { color:#008000; } a:active { color:#FF0000; } #cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } #cf img.top:hover { opacity:0; }
<a href="http://example.com/page1"> <div id="cf"> <img class="bottom" src="images/img_a_1.jpg" /> <img class="top" src="images/img_a_2.jpg" /> </div></a> <a href="http://example.com/page2"> <div id="cf"> <img class="bottom" src="images/img_b_1.jpg" /> <img class="top" src="images/img_b_2.jpg" /> </div></a> <a href="http://example.com/page3"> <div id="cf"> <img class="bottom" src="images/img_c_1.jpg" /> <img class="top" src="images/img_c_2.jpg" /> </div></a>
2 个解决方案
解决方案1
1 已采纳 2016-11-03 09:37:36
正如arhak先前评论的那样，我们在页面上使用id的次数不得超过一次，它们必须是唯一的。 以下是以下更改：
-
将每个
#cf更改为类.cf。 -
为每个
.cf添加了display:table-cell，以便它们并排放置。 将每个
.cf尺寸更改为可管理的50 x 50px。将无法正常运行的
<img>src替换为工作值*。将每个
.cf的大小.cf到50 x 50px *。
所有这些更改都是可选的，但第一次和第二次更改除外。
*我知道您的相对网址对您有用，但是在这里不起作用的示例会使情况更难以演示。 将来如果您有图像，请在示例中使用这些图像或具有相同大小的图像。 如果我们不知道50 x 50px不足以满足您的要求，那将会减慢寻找分辨率的过程。
SNIPPET
body { color: #fff; background-color: #000000; background-image: url('Background Image'); background-repeat: no-repeat; } a { color: #0000FF; } a:visited { color: #800080; } a:hover { color: #008000; } a:active { color: #FF0000; } .cf { position: relative; height: 50px; width: 50px; margin: 0 auto; display:table-cell; } .cf img { position: absolute; left: 0; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .cf img.top:hover { opacity: 0; }
<body> <a href="http://example.com/page1"> <div class="cf"> <img class="bottom" src='http://placehold.it/50x50/00f/fff?text=1'> <img class="top" src='http://placehold.it/50x50/cf0/000?text=2'> </div> </a> <a href="http://example.com/page2"> <div class="cf"> <img class="bottom" src='http://placehold.it/50x50/0e0/110?text=3'> <img class="top" src='http://placehold.it/50x50/0bb/011?text=4'> </div> </a> <a href="http://example.com/page3"> <div class="cf"> <img class="bottom" src='http://placehold.it/50x50/fff/000?text=5'> <img class='top' src='http://placehold.it/50x50/f00/fff?text=6'> </div> </a> </body>
解决方案2
0 2016-11-03 08:50:15
body { color:#000000; background-color:#000000; background-image:url('Background Image'); background-repeat:no-repeat; } a { color:#0000FF; } a:visited { color:#800080; } a:hover { color:#008000; } a:active { color:#FF0000; } #cf img { text-align: center; } #cf img.top:hover { opacity:0; }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <body> <a href="http://example.com/page1"> <div class="col-xs-12 form-group" id="cf"> <img class="bottom col-xs-6" src="images/img_a_1.jpg" /> <img class="top col-xs-6" src="images/img_a_2.jpg" /> </div></a> <a href="http://example.com/page2"> <div class="col-xs-12 form-group" id="cf"> <img class="bottom col-xs-6" src="images/img_b_1.jpg" /> <img class="top col-xs-6" src="images/img_b_2.jpg" /> </div></a> <a href="http://example.com/page3"> <div class="col-xs-12 form-group" id="cf"> <img class="bottom col-xs-6" src="images/img_c_1.jpg" /> <img class="top col-xs-6" src="images/img_c_2.jpg" /> </div></a> </body>
使用HTML / CSS定位图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.