Detailed explanation of common methods of operating images in CSS-CSS Tutorial-php.cn

Detailed explanation of common methods of operating images in CSS

高洛峰

Release： 2017-03-26 11:03:11

Original

1313 people have browsed it

This article mainly explains in detail the relevant information on the commonly used methods of operating images in Css. Friends in need can refer to it

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;
}

Copy after login

<!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>

Copy after login

The above is the detailed content of Detailed explanation of common methods of operating images in CSS. For more information, please follow other related articles on the PHP Chinese website!