在这个图片库中,我想让右上角的图片位置始终保持不变,我尝试修复但无法修复!
这里是图片库的引用
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
</div>
</div>
</body>
</html>
最佳答案
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 33.3%;
/* IE10 */
flex: 33.3%;
max-width: 33.3%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column" style="flex: 100%; max-width: 100%;">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
</div>
</div>
<div class="row">
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
</div>
</div>
</body>
</html>
您想要保留在顶部的图像只需将其从 .row
中删除并创建另一个 .row > .column
然后将 img
希望对你有帮助
关于javascript - Flexbox 图像库和单个图像位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57264062/