По сути, я создал этот веб-сайт свадебных фотографий, и он делает то, что я хочу, но просто ради изучения, я хотел знать, есть ли способ сократить мой код, потому что он выглядит избыточным.
Это то, что у меня есть сейчас, и я думаю, что это можно улучшить, я в основном повторяю это для 9 фотографий.Также по какой-то причине (всего 33 фотографии), когда я добавляю более 12 фотографий на страницу, некоторые из них являются просто пустыми блоками, поэтому я удалил эту пронумерованную фотографию, и то, что когда-либо перемещается на свое место, также становится пустым, поэтомуслучай, когда фотография работает некорректно.
.image {
height: 300px;
width: 30%;
float: left;
margin: 1.66%;
background-size: cover;
background-position: center center;
}
.image1 {
background-image: url("Photo1.jpg");
}
.image2 {
background-image: url("Photo2.jpg");
opacity: 0.5;
}
.image2:hover {
background-image: url("Photo2.jpg");
opacity: 1.0;
}
Как я уже сказал, она работает, но для одного она медленная, я не знаю почему, и потому что она довольно длинная.
вот HTML-код, так как он был запрошен
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Scobee/Feistner Wedding</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="weddingSite.css">
</head>
<body>
<p><em>Scobee/Feistner Wedding</em></p>
<div class="image image1"></div>
<div class="image image2"></div>
<div class="image image3"></div>
<div class="image image4"></div>
<div class="image image5"></div>
<div class="image image6"></div>
<div class="image image7"></div>
<div class="image image8"></div>
<div class="image image9"></div>
</body>
</html>