CSS背景图像应用

最新推荐文章于 2024-09-03 08:54:49 发布

约瑟芬儿

最新推荐文章于 2024-09-03 08:54:49 发布

阅读量60

点赞数

分类专栏： CSS 文章标签： css html5 css3 html

本文链接：https://blog.csdn.net/qishi45/article/details/117112170

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS背景图像的使用，包括如何设置、定位、重复和混合图像。通过实例，展示了背景图像在网页设计中的灵活性，如使用背景图片进行页面装饰、创建背景颜色过渡效果等。同时，还讲解了CSS3中新增的背景图像属性，如渐变、多个背景层和背景大小的自适应设置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像应用及渐变</title>
    <style>
        div{
            width: 1000px;
            height: 800px;
            border: 1px solid rebeccapurple;    /*border 简写属性在一个声明设置所有的边框属性*/
            /*可以按顺序设置如下属性：border-width     border-style    border-color*/
            background-image: url("images/2.jpg");  /*    默认是全部平铺（repeat）   */
        }

        .div1{
            background-repeat: repeat-x;      /*  水平  */
        }

        .div2{
            background-repeat: repeat-y;    /*  垂直  */
        }

        .div3{
            background-repeat: no-repeat;   /*  不平铺  */
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

在这里插入图片描述

约瑟芬儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS背景图像应用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图像应用及渐变</title> <style> div{ width: 1000px; height: 800px; border: 1px solid rebeccapu
复制链接

扫一扫