前端网页学习7（css背景属性）

最新推荐文章于 2024-07-15 13:12:20 发布

养羊得亿

最新推荐文章于 2024-07-15 13:12:20 发布

阅读量63

点赞数

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

本文链接：https://blog.csdn.net/qq_40551957/article/details/113477987

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端网页学习7（css背景属性）

背景属性：

背景颜色
background-color:透明的/颜色.（默认透明）
背景图片
相比于插入图片更容易控制位置
background-image: none/url();（默认无）
背景平铺
background-repeat: repeat/no-repeat/repeat-x/repeat-y(默认平铺)
平铺/不平铺/水平平铺/竖直平铺
背景位置
background-position: x y;
xy可使用方位名词或精确位置。
1方位名词（与xy顺序无关）：
center/top/left/right/bottom
(若省略一个，则默认居中)
2精确参数：
px/em
(若省略一个，则y默认居中)
3混合单位：
方位名词和精确参数混合使用
背景固定
background-attachment: scroll/fixed;（默认滚动）

正常写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        body {
            background-color: red;
            /* 默认透明颜色 */
            background-image: url(backimage1.png);
            /* 图片背景 */
            background-repeat: no-repeat;
            /* 不平铺 */
            background-position: 0 0;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

简写方法：

div {
            background: transparent url(backimage1) repeat fixed top;
        }

顺序无要求

背景色半透明

span {
            background: rgba(red, green, blue, 0.5)
        }

0-1从完全透明到完全不透明

养羊得亿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端网页学习7（css背景属性）

前端网页学习7（背景属性）背景属性：背景颜色background-color:透明的/颜色.（默认透明）背景图片相比于插入图片更容易控制位置background-image: none/url();（默认无）背景平铺background-repeat: repeat/no-repeat/repeat-x/repeat-y(默认平铺)平铺/不平铺/水平平铺/竖直平铺背景位置background-position: x y;xy可使用方位名词或精确位置。1方位名词（与xy顺序无关）：
复制链接

扫一扫