CSS学习第二天（2）-背景

最新推荐文章于 2024-07-19 15:50:46 发布

陈平安_码来

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量88

点赞数

分类专栏： css html 文章标签： css html

本文链接：https://blog.csdn.net/qq_45898579/article/details/114625755

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

CSS学习第二天（2）-背景

1.CSS的背景

1.1背景颜色

background-color属性定义了元素的背景颜色
使用方式：
background-color：颜色值;
一般情况下默认为transparent，即透明

1.2背景图片

使用方法：
background-image：none | url（url）
例子：

background-image: url(1.jpg);

1.3背景平铺

在这里插入图片描述

1.4 背景图片位置

1.4.1 参数是方位名词

background-position属性来改变图片在格子中的位置
在这里插入图片描述

1.4.2 参数是精确坐标

在这里插入图片描述

1.4.3 参数是混合单位

在这里插入图片描述

1.5背景图像固定

在这里插入图片描述
默认是滚动的

1.6 背景的复合写法

在这里插入图片描述

1.7 背景颜色半透明

在这里插入图片描述

1.8 背景总结

在这里插入图片描述

1.9 综合案例-五彩导航

代码：
<!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>五彩导航</title>
    <style>
        .nav a {
            width: 120px;
            height: 58px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            background-color: pink;
            color: white;
            text-decoration: none;

        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }

        .nav .bg3 {
            background: url(images/bg3.png) no-repeat;
        }

        .nav .bg3:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg4 {
            background: url(images/bg4.png) no-repeat;
        }

        .nav .bg4:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg5 {
            background: url(images/bg5.png) no-repeat;
        }

        .nav .bg5:hover {
            background-image: url(images/bg11.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>

</html>

结果效果图
在这里插入图片描述

陈平安_码来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习第二天（2）-背景

CSS学习第二天二1.CSS的背景1.1背景颜色background-color属性定义了元素的背景颜色使用方式：background-color：颜色值;一般情况下默认为transparent，即透明1.2背景图片使用方法：background-image：none | url（url）例子：background-image: url(1.jpg);1.3背景平铺1.4背景图片位置background-position属性来改变图片在格子中的位置...
复制链接

扫一扫