详解Css常用操作图片方法

这篇文章主要为大家详解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>
 
    <p class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <p class="text">一张背景图</p>
    </p>
    <p class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <p class="text">一张背景图</p>
    </p>
    <p class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <p class="text">一张背景图</p>
    </p>
    <p class="image">
        <a href="#" target="_self">
            <img src="2.jpg" alt="背景" width="200px" height="200px">
        </a>
        <p class="text">一张背景图</p>
    </p>
</body>
</html>

以上就是详解Css常用操作图片方法的详细内容，更多请关注其它相关文章！

相关文章：

你感兴趣的文章：

标签云：