CSS入门基础----css的背景属性

最新推荐文章于 2024-02-25 22:03:04 发布

B.Bz

最新推荐文章于 2024-02-25 22:03:04 发布

阅读量116

点赞数

分类专栏： html5和css基础文章标签： css html html5

本文链接：https://blog.csdn.net/bjsyc123456/article/details/120604181

版权

html5和css基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

背景颜色 background-color

语法：

<style>
	/* 默认的值是 transparent  透明的 */
	background-color:颜色值;
</style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

背景图片 background-image

语法：

<style>
	background-image:none | url (图片路径);
</style>

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 设置边框 */
            border: 1px solid black;
            /* 设置背景图片  url是图片路径 */
            background-image: url(./img/logo.png);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

背景平铺 background-repeat

语法：

<style>
	background-repeat : repeat | no-repeat | repeat-x | repeat-y 
</style>

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 设置边框 */
            border: 1px solid black;
            /* 设置背景图片  url是图片路径 */
            background-image: url(./img/logo.png);
            /* 设置背景图片不平铺 */
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

背景附着 background-attachment

语法：

<style>
	background-attachment : scroll | fixed 
</style>

默认背景是随着滚动的

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

小案例：

背景图片不随着滚动条滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wai {
            /* 最外层盒子设置背景图片 */
            background-image: url(./img/初秋.jpg);
            /* 设置背景图片不平铺 */
            background-repeat: no-repeat;
            /* 设置背景不随着滚动条滚动 */
            background-attachment: fixed;
        }
        
        .box1 {
            /* 第一个盒子设置宽高和背景色白色 */
            width: 100%;
            height: 700px;
            background-color: #fff;
        }
        
        .box2 {
            /* 第二个盒子设置宽高，背景颜色默认transparent透明 */
            width: 100%;
            height: 100px;
        }
        
        .box3 {
            /* 第三个盒子跟第一个盒子一样 */
            width: 100%;
            height: 700px;
            background-color: #fff
        }
    </style>
</head>

<body>
    <div class="wai">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

图片1：
在这里插入图片描述
图片2：

背景位置 background-position

语法:

background-position : length || length
background-position : position || position

参数	值
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

`注意：`

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left > top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐> 标，第二个值是y坐标

背景尺寸 background-size

介绍两个文字的样式contain和cover

contain在保证图片完整展现的前提下，填满整个盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            margin: 60px auto;
            background-image: url(./img/1.jpg);
            /* 设置背景的尺寸，在图片完整的前提下填满整个盒子 */
            background-size: contain;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

cover将图片填满整个盒子，但并不保证图片完整

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            margin: 60px auto;
            background-image: url(./img/1.jpg);
            /* 设置背景的尺寸，将图片填满盒子但不保证图片完整*/
            background-size: cover;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

B.Bz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门基础----css的背景属性

背景颜色 background-color语法：<style> /* 默认的值是 transparent 透明的 */ background-color:颜色值;</style> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi.
复制链接

扫一扫