HTML_CSS学习：背景、鼠标相关属性

马龙强_

已于 2024-05-03 15:17:56 修改

阅读量422

点赞数 1

文章标签： html css 学习

于 2024-05-03 15:15:35 首次发布

本文链接：https://blog.csdn.net/m0_74972727/article/details/138417006

版权

本文详细介绍了HTML和CSS中的背景相关属性，如颜色、图片、重复方式和位置，以及鼠标指针样式的设置，包括预定义样式和自定义图像。

摘要由CSDN通过智能技术生成

一、背景相关属性

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        body{
            background-color: greenyellow;
        }
        div{
            width: 400px;
            height: 400px;
            font-size: 40px;
            border: 5px black solid;
            /*默认背景色*/
            /*background-color: transparent;*/
            /*设置背景颜色*/
            background-color: #0dcaf0;
            /*设置背景图片*/
            background-image: url("../pictures/喜羊羊.jpg");
            /*设置背景图片的重复方式*/
            /*background-repeat: no-repeat;*/
            /*只在水平方向上重复*/
            background-repeat: repeat-x;
            /*控制背景图片的位置*/
            /*background-position: left top;*/
            /*控制背景图片的位置-第一种写法：关键词*/
            background-position: center bottom;
            /*控制背景图片的位置-第二种写法：具体的像素值*/
            /*单写一个数值：表示的是x轴方向*/
            background-position: 70px 120px;
            /*复合属性*/
            background: skyblue url("../pictures/灰太狼.jpg") center bottom 120px;

        }
    </style>
</head>
<body>
    <div>你好啊！</div>

</body>
</html>

显示结果：

二、鼠标相关属性

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标相关属性</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: skyblue;
            /*cursor: wait;*/
            /*cursor: move;*/
            /*cursor: help;*/
            cursor: url("../pictures/喜羊羊.jpg"),pointer;
        }
        button{
            cursor: pointer;
        }
        input{
            cursor: move;
        }
    </style>
</head>
<body>
    <div>把鼠标放进来看一看
        <input type="text">
        <a href="#">百度</a>
        <button>点我</button>
    </div>

</body>
</html>

显示结果：