CSS进阶背景颜色

最新推荐文章于 2024-05-03 21:05:41 发布

杜dl

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量14

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_63835813/article/details/131836456

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            /* 背景颜色 */
            background-color: pink;
            background-image: url(./img/sc17.png),url(./img/sc5.png);
            /* 平铺方式
            repeat：默认全平铺
            repeat-x ：横铺一行
            repeat-y ：竖铺一行
            no-repeat：不平铺
            */
            background-repeat: no-repeat;
            /* 图片大小
            1.百分比
            2.cover 横向和竖向都要撑满
            3.contain 竖向横向有一边撑满就慢了
             */
            background-size: cover;
            /* 背景图是否滚动 */
            background-attachment: fixed;
            /*
            背景图片定位
            第一个值:x轴(横向) 定位方式
            第二个值:y轴(竖向)定位方式
            一个值是,默认填充另一个方向的为center
            1. top bottom left right center
            五个值两两使用
            2.使用百分比
            第一个值是 x轴
            第二个值是 y轴
            3.使用固定值
            */
            background-position: 10% 10%;
            /* 盒子阴影
            第一个值:横向偏移
            第二个值:纵向便宜
            第三个值:阴影摩呼之
            第四个值:阴影外延
            第五个值:颜色
            第六个值:阴影朝向 */
            box-shadow: 20px 20px 50px 20px red;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「白隐居」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_64776610/article/details/131835934

杜dl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS进阶背景颜色

原文链接：https://blog.csdn.net/weixin_64776610/article/details/131835934。版权声明：本文为CSDN博主「白隐居」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。一个值是,默认填充另一个方向的为center。第一个值:x轴(横向) 定位方式。第二个值:y轴(竖向)定位方式。repeat-y ：竖铺一行。/* 背景图是否滚动 */第六个值:阴影朝向 *//* 背景颜色 */第三个值:阴影摩呼之。
复制链接

扫一扫