关于css的知识（二）-CSDN博客

本文链接：https://blog.csdn.net/2201_75683676/article/details/139748385

一、背景简写

background-image: url(../img/熊梓淇.jpg);

background-repeat: no-repeat;

background-color: red;

background-position: center;

可以简写为：

background: red url(../img/熊梓淇.jpg) no-repeat center;

二、背景的尺寸

1.使用像素

background-size: 1440px 960px;

2.设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。有可能会有留白

background-size: contain;

3.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如冇溢出部分则会被隐藏。我们平时用的cover最多

background-size: cover;

三、制作导航案例

制作一个导航，鼠标悬停时出现以下图片效果，为了效果更明显，加一个红色边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始属性 */
        
        a {
            text-decoration: none;
            /* a标签的字体要直接对a标签进行设置 */
            color: #666;
        }
        /* 后代选择器 */
        
        .nav a {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            color: black;
            /* 由于a标签是行内元素,所以设置宽和高无效 */
            display: inline-block;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 50px;
        }
        /* 当鼠标悬停时显示图片和更换了字体颜色 */
        .nav a:hover {
            background: url(../img/微信图片_20240617103820.png) no-repeat center;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="">首页</a>
        <a href="">业务展示</a>
        <a href="">人才招聘</a>
        <a href="">关于我们</a>
        <a href="">联系我们</a>
    </div>
</body>

</html>

运行结果：