CSS常用声明＞（中篇）#背景属性#+练习题

原创已于 2024-11-01 14:38:10 修改 · 683 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-10-26 15:48:09 首次发布

一、背景属性

常用的背景属性

属性	说明
background-image	设置背景图像
background-repeat	设置背景图像重复方式
background-position	设置背景图像定位
background-attachment	设置背景图像固定
background-size	设置背景图像大小

1)背景图像

语法格式：background-image:url(url) | none
参数：url表示要插入背景图像的路径，none表示不加载图像。
说明：如果网页中某元素同时具有 background-image属性和 background-color 属性，那么 background-image 属性优先于 background-color属性，也就是说背景图像永远覆盖于背景色之上。background-color 设置元来的背景色;background-image 以图像作为元来的背景，元素的背景是元素的总大小，包括填充和边界(不包括外边距)默认情况下background-imnage属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像如果图像超过元素大小，则从图像的左上角开始裁剪。

2）背景重复

语法格式：background-repeat:repeat | no-repeat | repeat-x | repeat-y
参数： repeat表示背景图像在水平和垂直方向平铺，是默认值；no-repeat表示背景图像不平铺；repeat-x表示背景图像在水平方向平铺；repeat-y表示背景图像在垂直方向平铺。

3）背景图像定位

语法格式：background-position:length | | length / position | | position
说明：设置背景定位有三种方法：关键字定位（参数如下）；长度定位；百分比定位。
参数：①top：将背景图像同元素的顶部对齐；②bottom：将背景图像同元素的底部对齐； ③left：将背景图像同元素的左边对齐；④right：将背景图像同元素的右边对齐； ⑤center：将背景图像相对于元素水平居中或垂直居中。

4）设置背景图像固定

语法格式：background-attachment:scroll / fixed
参数：scroll：图像随页面元素一起滚动（默认值）；fixed：图像固定在屏幕上，不随页面元素滚动。

5）背景图像大小

语法格式：background-size:auto | length | percentage | cover | contain
说明：设置背景图像的大小以像素或百分比显示。当指定为百分比时，大小会由所在的区域宽度、高度决定。

二、练习题

如图：

代码：

<style>
        .font{
            text-align: left;
            text-decoration:underline;
            text-transform: uppercase;
        }
        .font1{
            width: 800px;
            height: 30px;
            text-align: center;
            text-decoration: line-through;
            text-transform: lowercase;
            background-color: yellow;

        }
        .font3{
            text-align: right;
            text-transform:capitalize;
            text-decoration: overline;
        }
        #img1{
            width: 200px;
            height: 200px;
            background-color: gray;
            border: green 15px dotted;
        }
        footer{
            width: 800px;
            height: 300px;
            background-color: rgb(241, 237, 177);
            background-image: url(../咖啡.jpg);
            background-repeat:no-repeat;
            /* 背景图适配容器大小 */
            background-size: 50% 50%;
            /* 背景图的位置 */
            background-position:top center;
        }
    </style>
</head>
<body>
    
    <p class="font">FIRST测试文本：靠左对齐，下划线，大写字母</p>
    <p class="font1">second测试文本：居中对齐，删除线，小写字母</p>
    <p class="font3">third测试文本：靠右对齐，上划线，首字母大写字母</p>
    <img id="img1" src="../咖啡.jpg">
    <header></header>
    <nav></nav>

    <main>
        <article></article>
        <aside></aside>
    </main>

    <footer></footer>
</body>