详解Css常用操作图片方法

时间：2020-11-27 来源：智榕旅游

这篇文章主要为大家详解Css常用操作图片方法的相关资料,需要的朋友可以参考下

body{
 background-color: #0078b3;
}
 
.image{
 border: 1px solid darkgray;
 width: auto;
 height: auto;
 float: left;
 text-align: center;
 margin: 5px;
}
 
img{
 margin: 5px;
 opacity: 1;
}
 
.text{
 font-size: 12px;
 margin-bottom: 5px;
}
 
a:hover{
 background-color: aqua;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片</title>
 <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
 
 <div class="image">
 <a href="#" target="_self">
 <img src="2.jpg" alt="背景" width="200px" height="200px">
 </a>
 <div class="text">一张背景图</div>
 </div>
 <div class="image">
 <a href="#" target="_self">
 <img src="2.jpg" alt="背景" width="200px" height="200px">
 </a>
 <div class="text">一张背景图</div>
 </div>
 <div class="image">
 <a href="#" target="_self">
 <img src="2.jpg" alt="背景" width="200px" height="200px">
 </a>
 <div class="text">一张背景图</div>
 </div>
 <div class="image">
 <a href="#" target="_self">
 <img src="2.jpg" alt="背景" width="200px" height="200px">
 </a>
 <div class="text">一张背景图</div>
 </div>
</body>
</html>