CSS核心属性-背景属性

最新推荐文章于 2024-01-09 09:32:46 发布

房东的喵

最新推荐文章于 2024-01-09 09:32:46 发布

阅读量186

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105844102

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

背景属性：
background-color:背景颜色
语法：{backeground-color:颜色值；}
 
background-image:背景图片的设置
语法：
{background-image:url(背景图片的路径及全称);}

说明：
网页上有两种图片形式：插入图片、背景图
插入图片：属于网页内容，也就是结构
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等

容器尺寸等于图片尺寸。背景图片正好显示在容器中
容器尺寸大于图片尺寸，背景图将默认平铺。直至铺满元素
容器尺寸小于图片尺寸，只显示元素范围以内的背景图

background-repea：背景图片的平铺属性
语法：
{background-repeat：no-repeat/repeat/repeat-x/repeat-y；} 
说明：
no-repeat： 不平铺
repeat：平铺
repeat-x：横向平铺
repeat-y：纵向平铺

background-position：背景图片的位置属性
语法：
{background-position：值1 值2；}
说明：
值1：水平方向上的对齐方式（left/center/right）或值
值2：垂直方向上的对齐方式（top/center/bottom）或值
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置
向左方向，向上方向都是负值

背景属性的缩写
语法：{background：属性值1 属性值2 属性值3；}

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 1000px;height: 600px; border: #000 1px solid;background-color: #f00;
            background-image: url(beijing.jpg);margin-bottom: 20px; background-repeat: no-repeat;
            background-position: center;}
            .box2 {width: 720px; height: 480px; border: #000 1px solid; background-color: #f00;margin-bottom: 500px;}
            .box3 {width: 1000px; height: 1000px; border: #000 1px solid; background: #f00 url(1.jpg) no-repeat center; 
            } 
        </style>
    </head>
    <body>
        <div class="box1">
        <img src="xiyou.png"/>
        <h1>西安邮电大学</h1>
        </div>
        <div class="box2">
        <img src="xiyou.png"/>
        <h1>西安邮电大学</h1>
        <img src="beijing.jpg"/>    
        </div>
        <div class="box3"></div>
    </body>
</html>

房东的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS核心属性-背景属性

背景属性：background-color:背景颜色语法：{backeground-color:颜色值；} background-image:背景图片的设置语法：{background-image:url(背景图片的路径及全称);}说明：网页上有两种图片形式：插入图片、背景图插入图片：属于网页内容，也就是结构背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等容...
复制链接

扫一扫