站内搜索:
首页 >> 前端 >> 内容
CSS_背景

时间:2017/1/25 10:23:44

background-color 背景颜色

可以用padding指定颜色的边距

<html>
    <head>
        <style text/css">
            .s1{
                background-color:red;
            }
            .s2{
                background-color:blue;
                padding:20px;
            }
            .s3{
                background-color:yellow;
            }
        </style>
    </head>
    <body class="s3">
        <p class="s1">红色的段落</p>
        <p class="s2">蓝色的段落,20px的外边距</p>
    </body>
</html>
CSS_背景

background-image 背景图片

background-image:url(路径)

<html>
    <head>
        <style type="text/css">
            .s1{
                background-image:url("素材/1.png");
            }
        </style>
    </head>
    <body class="s1">
    </body>
</html>
CSS_背景

background-repeat 重复

repeat 全部重复

repeat-x 沿着x重复

repeat-y 沿着y重复

no-repeat

CSS_背景

background-position 重复位置

top 上

bottom 下

left 左

right 右

center 中间

用数值表示位置:mpx npx(x,y)

用百分数表示

位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。

<!--表示图片位置在水平2/3,竖直1/3处-->
            .s1{
                background-image:url("素材/1.png");
                background-repeat:no-repeat;
                background-position: 66% 33%;
            }
CSS_背景

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

当background-attachment 的值为fixed时,随着页面的滚动图片的位置不会改变

CSS_背景

  • 上一篇:margin层叠情况,及表现
  • 下一篇:select2api使用教程(全)
  • 返回顶部