基本上，我建立了这个婚纱照网站，它做了我想要的，但只是为了学习，我想知道是否有办法缩短我的代码，因为它看起来多余。
这是我目前认为可以改进的地方，我基本上重复了 9 张照片。同样出于某种原因(总共有 33 张照片)当我向页面添加超过 12 张照片时，其中一些只是空 block ，所以我删除了那张编号的照片并且移动到它的位置的东西也变成空的所以它不是照片无法正常工作的情况。
.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>
最佳答案
如果您使用伪选择器 (:hide)，则只需声明一次。你可以这样做。
.image2 {
background-image: url("Photo2.jpg");
opacity: 0.5;
}
.image2:hover {
opacity: 1.0;
}
删除声明 background-image: url("Photo2.jpg");在悬停事件上。
关于css - 有没有比我写的更简洁的方法来获得具有一定不透明度的背景图像然后具有悬停效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54740820/