前端-html，css 背景属性

最新推荐文章于 2024-06-16 16:01:05 发布

敦煌璧画

最新推荐文章于 2024-06-16 16:01:05 发布

阅读量87

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_58200396/article/details/121172079

版权

day06 背景属性

01-背景颜色

<!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>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            /* background 背景属性 加颜色值 */
            /*  background-color  背景颜色 ： 添加颜色值*/
            /* 颜色值 ： 英文的颜色单词  十六进制表示   rgb rgba */
            /* aqua 英文颜色表示 */
            /* “#”开头的6位十六进制数值表示一种颜色  #CCC 十六进制表示颜色*/
            /* background-color: rgb(red, green, blue);  rgb三原色，Red， Green，Bule的简称*/
            /* rgba 在三原色加上透明度*/
            /* background-color: rgba(red, green, blue, alpha); */
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

02-背景图片

<!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>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            /* background-image 背景图片设置 */
            /* url 要图片的路径 */
            background-image: url(./logo.png);
            /* 简写 */
            /* background: url(./logo.png); */
        }
    </style>
</head>

<body>
    <img src="https://static.zzhitong.com/lesson-files/html/img/7-1.png" alt="">
    <div class="box"></div>
</body>

</html>

03.背景图片平铺问题

<!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>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            /* background-color: pink; */
            background-image: url(./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>

04-背景位置-方位名词

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(./logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>
</head>

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

</html>

05- 背景图片-精准位置

<!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>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(./logo.png);
            background-repeat: no-repeat;
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;

        }
    </style>
</head>

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

</html>

06-背景位置-混合单位

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            background-image: url(./logo.png);
            background-repeat: no-repeat;
            /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是 20 */
            /* background-position:  center 20px ; */
            /* 当一个值的时候第二值就为center */
            background-position: 20px;

        }
    </style>
</head>

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

</html>

07-背景图片图片的固定

<!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>Document</title>
    <style>
        body {
            background-image: url(./R-C.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>

</body>

</html>

08-背景属性复合写法

09-背景图片尺寸

<!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>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            /* background-image 背景图片设置 */
            /* url 要图片的路径 */
            background-image: url(./logo.png);
            background-repeat: no-repeat;
            /* 简写 */
            /* background: url(./logo.png); */
            /* X和Y默认和原图 宽 高 对应，同时X Y可以是自己设定的百分比或像素 */
            /* background-size: 50px 50px; */
            /* background-size: 100% 100%; */
            /* 等比例缩放直到铺满X轴和Y轴； */
            /* background-size: cover; */
            /* 等比例缩放直到铺满X或Y轴其中一个 */
            /* background-size: contain; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

敦煌璧画

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-html，css 背景属性

day06 背景属性01-背景颜色<!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">
复制链接

扫一扫