首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >背景属性

背景属性

作者头像
十月梦想
发布2018-08-29 10:25:55
4180
发布2018-08-29 10:25:55
举报
文章被收录于专栏:十月梦想十月梦想

背景属性

    1.作用

        设置背景颜色和背景图片

    2.背景色

        属性

            background-color:值;

        取值

            任何合法性的颜色值

    3.背景图片

        属性

            background-image:url();

4.背景属性

            background-repeat:值

        取值

            no-repeat  不重复

            repeat      重复(默认)

            repeat-x    水平重复

            repeat-y    垂直重复

  div{width:8000px;
    height:3000px;
    border:1px solid purple;
    background-image:url(timg.jpg);
    background-repeat:repeat-x;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    5.背景图片尺寸

        属性

            background-size:值;

        取值

            1.值1  值2;

               宽   高

               %    % 

            2.cover  

                覆盖 将背景图片等比缩放

                直到背景能覆盖元素的所有区域

            3.contain

                包含 将背景图等比缩放

                直到背景图像碰到右边或者下边时,停止缩放

                导致图片显示不全

<style>
    
    div{width:800px;
    height:300px;
    border:1px solid purple;
    background-color:grey; 
    background-image:url(timg.jpg);
    background-size:contain;
    /*contain等比缩放 */
    /*cover超过*/
    /*1.值1  值2;  宽   高      */
     
           
    background-repeat:no-repeat; }
    </style>

    6.背景定位

        1.作用

            改变背景图像在元素中的位置

        2.语法

            background-position:

            取值

                1. x y;

                  x:水平偏移距离

                    取值为正  往右偏

                    取值为负  往左偏移

                  y:垂直偏移距离

                    取值为正  往下偏

                    取值为负  往上偏

                2.px  px;

                3.关键字

                    x:left/center/right:

                    y:top/center/bottom

#d1
{
width:80%;
height:120px;
border:1px solid gray;
margin-bottom:20px;



}
#d1-1
{
width:75px;
height:15px;
background-image: url(iconlist_1.png);
background-position: -108px -240px;
background-repeat: no-repeat;
margin:10px 20px;

}
#d1-2
{
width: 80%;
height:110px;

border-top: 1px solid red;
margin:10px 20px;

}
#d2 a{
text-decoration:none;
border:1px solid grey;

padding:10px;
border-radius: 10%;



}
#d2 a:hover{
text-decoration: underline;
background-color: green;


}
#d2 #a1{
border:none;
color:black;


}

#d2 #a1:hover{
text-decoration: none;

background-color: white;

}

   背景定位background-position首先

background-image: url(iconlist_1.png);
background-position: -108px -240px;
background-repeat: no-repeat;

确定背景图像,定位位置,和背景重复

 7.背景图片固定

        属性:

            background-attachment:

        取值

            1.fixed:背景固定不动

            2.scroll:背景滚动

body{
background-image: url(timg.jpg);
background-attachment: fixed;
/*取值:fixed背景固定,p标签内容滑动*/
/*取值:scroll背景固定,p标签内容滑动*/
background-repeat: no-repeat;

}

   使用:在css样式中写入body标签内的样式先确定背景图片位置和背景固定。

背景缩写

background:url() repeat positon;

 8.CSS sprites css雪碧

        css精灵

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-11-1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档