css-background常见的属性

博主:stpevenchowstpevenchow 4个月前 ( 10-16 ) 31 0条评论
摘要: <!DOCTYPE html><html><head>    <meta charset="utf...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css常见的属性</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div2{
            width: 400px;
            height: 400px;
            color: red;
            background-color: orange;
            background-image: url("../aoshuang.png");
        }
        .div3{
            width: 400px;
            height: 400px;
            color: red;
            background-color: orange;
            background-image: url("../aoshuang.png");
            background-repeat: no-repeat;
        }
        .div4{
            width: 400px;
            height: 400px;
            color: red;
            background-color: orange;
            background-image: url("../aoshuang.png");
            /* background-repeat: no-repeat; */
            background-position: left 100px;
            background-size: 160px 160px;
        }
    </style>
</head>
<body>
    <!-- background 属性
        background-color---背景颜色
        background-image---背景图片
        background-repeat---背景图片平埔
        background-position---背景图片定位
        background-size---背景图片大小
    -->
    <!-- 背景
    background-color:背景颜色
        注意:不管是背景颜色还是背景图片,一定是显示在内容之后,会被内容遮挡
    -->
    <div class="div1">每天感觉自己都在进步</div>
    <!-- 背景图片
    背景图片显示在内容之下,显示在背景颜色之上,默认是从左上角开始平埔显示
    -->
    <div class="div2">背景图片</div>
    <!-- 背景图片平埔设定 background-repeat
        no-repeat:不平埔
            repeat-x:X轴平埔
            repeat-y:Y轴平埔
            图片平埔是从图片的原始位置开始,图片默认原始位置在元素的左上角
    -->
    <div class="div3">背景图片平埔效果</div>
    <!-- 图片定位 background-position
    背景图片默认出现在元素的左上角,可以设定背景图片的位置,背景图片定位特点:x轴,y轴,如果只设定一个方向的定位,另一个方向的定位会自动居中
    属性值  2种形式
    1,英文单词
    top bottom y轴方向定位
    left right x轴方向定位
    center     居中定位
     -->
     <div class="div4">图片定位</div>
     <!-- 2,数值形式
    设定两个数值作为定位属性值
    第一个数值 x轴定位属性值
    第二个数值 y轴定位属性值
        如果只写一个数值为x轴定位属性值,则y轴居中,如果x轴属性值为width的值得一半,则图片居中;同理只写一个y轴一样得效果,只是写Y轴得时候x属性值必须写0px,x轴也可以用英文表示
     -->
     <!-- 背景图片的大小 background-size
        写1个属性值图片的宽,设置一个属性图片会等比例缩放
        写2个属性值图片的宽、高
     -->
</body>
</html>

浮窗式百度分享代码,请勿使用文字或图标

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏