CSS背景总结

最新推荐文章于 2024-06-12 12:52:53 发布

娃哈哈哈哈呀

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量77

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/karlaofsky/article/details/118853003

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

背景颜色

background-color

语法：

background-color：颜色值；

操作如下：


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent;透明的 清澈的 */
            background-color: pink;
        }
    </style>
</head>

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

</html>

背景图片

background-image

实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片

语法：

background-image：url（图像路径）；

操作如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(images/logo.png);

        }
    </style>
</head>

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

</html>

背景平铺

background-repeat

参数值：

repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺

操作如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: pink; */
            background-image: url(images/logo.png);

            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认情况下，背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3.沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4.沿着y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压着背景颜色 */
        }
    </style>
</head>

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

</html>

背景图片位置

background-position

语法：background-position:x y ;

参数代表的意思是:x坐标和y坐标。可以使用方位名词或者精确单位

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

1.参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

操作如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景方位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position: 方位名词; */
            /* background-position: center top; */
            /* 此时水平一定是靠右侧对齐 第二个参数省略y轴是垂直居中显示的 */
            /* background-position: right; */
            /* 此时第一个参数一定是top  y轴 顶部对齐 第二个参数省略x轴是水平居中显示的 */
            background-position: top;

        }
    </style>
</head>

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

</html>

2.参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

操作如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: fuchsia;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px 50px x轴一定是20 y轴一定是50 */
            background-position: 20px 50px;
        }
    </style>
</head>

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

</html>

3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

语法
background-attachment :scro l fixed ;

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

操作如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/we.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 150px;
        }
    </style>
</head>

<body>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
</body>

</html>

背景简写

没有特定的书写顺序，一般习惯约定顺序为：

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

语法

background: transparent url(image.ipg) repeat-y fixed top;

操作如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性复合写法</title>
    <style>
        body {

            background: black url(images/we.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 130px;
        }
    </style>
</head>

<body>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>
    <p>娃哈哈哈哈哈哈哈哈</p>

</body>

</html>

背景半透明

语法：

background:rgba(0，0，0，0.3);

最后一个参数是alpha透明度，取值范围在0~1之间
我们习惯把03的0省略掉，写为background:rgba(0,0,0.3);
注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响

娃哈哈哈哈呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS背景总结

背景颜色background-color语法：background-color：颜色值；操作如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte..
复制链接

扫一扫