6.背景属性

最新推荐文章于 2022-04-28 06:00:00 发布

121689Stone

最新推荐文章于 2022-04-28 06:00:00 发布

阅读量244

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37993288/article/details/77412998

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

background-color 背景颜色
background-image 背景图片

background-image：url("1.png");

背景平铺background-repeat:

repeat默认平铺 |no-repeat不平铺 |repeat-x水平方向平铺，垂直不平铺 |repeat-y 垂直方向平铺
background-position
left | right |center |top |bottom 背景定位
特点：
（1）方位值只写一个时，另一个默认居中
background-position:left; （方向在左面，垂直方向居中）
（2）写2个方位值得时候，左右和垂直顺序没有要求。
background-position:right buttom;
（3）只写一个center时，图片在中间。
background-position:center;
（4）当写两个具体值时，第一个代表水平方向，第二个代表垂直方向。（只写一个数值时，则这个数值代表水平方向，垂直方向居中。）
background-position:20px,30px;
背景是否滚动：background-attachment: scroll | fixed;

scroll图片定位从元素的定位出发(默认)。
fixed图片定位从浏览器定位出发。

<head>
    <style type="text/css">
        .box{
            width:1400px;
            height:1500px;
            background-image:url("1.png");
            background-repeat:no-repeat;
            background-position:bottom right;
            background；fixed;
        }
    </style>
</head>
<body>
    <div class="box">df<div>
</body>

背景属性连写：

background:red url("1.png") no-repeat bottom;
特点:连写时没有顺序要求，url为必写项，位置，重复等才会生效。

※清除列表项前面的小标

li{
    list-style:none ;
}

121689Stone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.背景属性

background-color 背景颜色background-image 背景图片background-image：url("1.png");背景平铺background-repeat:repeat默认平铺 |no-repeat不平铺 |repeat-x水平方向平铺，垂直不平铺 |repeat-y 垂直方向平铺background-position left | righ
复制链接

扫一扫