web前端开发html5+css3（入门学习笔记）（day14）

所需ps的小技巧

1.像素的设置

ps右侧操作页面，单击右键界面选项,单位与标尺，标尺快捷键：ctrl+r。

背景

<!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>
        .box1{
            width: 5000px;
            height: 5000px;
            /* 
                1.background-color设置背景颜色
            */
            background-color: #cf4747;
            /* 
                2.background-image设置背景图片
                    ·若同时设置背景图片与背景颜色，则背景的颜色就是图片的背景色
                    ·若背景图片小于元素，则背景图片会自动将其铺满
                    ·若背景图片大于元素，则背景图片将无法完全显示
                    ·若背景图片等于元素，则正常显示
            */
            background-image:url("./img/3.jpeg") ;
            /*
            3. background-repeat用来设置背景的重复方式
                可选值
                    repeat默认值，背景会沿着x，y两个方向重复
                    repeat-x沿x轴重复
                    repeat-y沿y轴重复
                    no-repeat不重复 */
                background-repeat: no-repeat;
            /* 
            4background-position用来设置背景图片的位置
                设置方式
                    通过top left right bottom center 几个表示方位的词来设置背景位置
                        使用方位词时，需同时指定两个值，如果只指定一个，则后一个默认
                        center
                    通过偏移量来指定背景图片的位置
                        水平方向的偏移量，垂直方向偏移量 */
            /* background-position: center center; */
            /* background-position: 100px 100px; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

背景2（9个属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="

web前端开发html5+css3（入门学习笔记）（day14）

悦读